CSS Animated Accordion

<html lang="en">
	<meta charset="UTF-8">
	<title>CSS Animated Accordion</title>
	<link href="styles.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".accordion_header").click(function(){
			   $(".accordion_header").removeClass("active");
			   $(this).addClass("active");
			});
		});
	</script>
  
<div class="wrapper">
  <h4> Stylish FAQ in Blogger Website </h4>
  <div class="accordion_wrap accordion_1">
    <div class="accordion_header">
      How to Add FAQ in blogger
    </div>
    <div class="accordion_body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_2">
    <div class="accordion_header">
      Blogger advise
    </div>
    <div class="accordion_body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! 1234567</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_3">
    <div class="accordion_header">
      Visit my techgovind blog
    </div>
    <div class="accordion_body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_4">
    <div class="accordion_header">
      Make Money Online from internet
    </div>
    <div class="accordion_body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi! 1234567</p>
    </div>
  </div>
  <div class="accordion_wrap accordion_5">
    <div class="accordion_header">
      100 % HTML CSS add in blogger
    </div>
    <div class="accordion_body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
    </div>
  </div>
</div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
}

body{
  background: #ffffff
}

.wrapper{
  width: 100%;
  margin: 80px auto 0;
}

.wrapper .accordion_wrap .accordion_header{
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 25px;
  padding: 15px;
  color: #5a1bab;
  font-weight: 700;
  border-bottom: 2px solid #ffc400;
  position: relative;
  cursor: pointer;
}

.wrapper .accordion_wrap:first-child .accordion_header{
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header{
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header:hover{
  border-bottom: 2px solid transparent;
}

.wrapper .accordion_wrap .accordion_header:before,
.wrapper .accordion_wrap .accordion_header:after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 20px;
  height: 2px;
  background: #39a098;
}

.wrapper .accordion_wrap .accordion_header:hover{
  color: #01645d;
  border-color: #01645d;
}

.wrapper .accordion_wrap .accordion_header:hover:before,
.wrapper .accordion_wrap .accordion_header:hover:after{
  background: #01645d;
}

.wrapper .accordion_wrap .accordion_header:after{
  transform: rotate(-90deg);
  transition: all 0.5s ease;
}

.wrapper .accordion_wrap .accordion_body{
  width: 100%;
  height: 0px;
  transition: all 0.5s ease;
  background: #e0f9ff;
  border-end-start-radius: 25px;
  overflow: hidden;
}

.wrapper .accordion_wrap .accordion_body p{
  padding: 15px;
  font-size: 15px;
  line-height: 22px;
  color: #080300;
}

.wrapper .accordion_wrap .accordion_header.active{
  color: #01645d; 
  border-color: #01645d;
}

.wrapper .accordion_wrap:last-child .accordion_header.active{
  border-bottom: 2px solid #01645d;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.wrapper .accordion_wrap .accordion_header.active:before,
.wrapper .accordion_wrap .accordion_header.active:after{
  background: #01645d;
}

.wrapper .accordion_wrap .accordion_header.active:after{
  transform: rotate(0deg);
}

.wrapper .accordion_wrap .accordion_header.active + .accordion_body{
  height: 180px;
}
<style/>

demo

Code Preview

Popular Posts

Pages

CSS Animated Accordion