---------HTML---------
<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
</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 Monetization
</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">
Subscribr YouTube Channel
</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
</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
</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>
**********************************************
---------Css-----------
@import url('https://fonts.googleapis.com/css?family=Muli:400,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
}
body{
background: #1f938a;
}
.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;
}
*********************
Subscribe Our Channel - Tech Vodh
*********************