Content for Section 1 goes here
Content for Section 2 goes here
Content for Section 3 goes here
<div class="accordion">
<div class="accordion-header active">
Section 1
<span class="accordion-icon"><i class="fa fa-angle-up rotate"></i></span>
</div>
<div class="accordion-content active">
<p>Content for Section 1 goes here</p>
</div>
<div class="accordion-header">
Section 2
<span class="accordion-icon"><i class="fa fa-angle-down"></i></span>
</div>
<div class="accordion-content">
<p>Content for Section 2 goes here</p>
</div>
<div class="accordion-header">
Section 3
<span class="accordion-icon"><i class="fa fa-angle-down"></i></span>
</div>
<div class="accordion-content">
<p>Content for Section 3 goes here</p>
</div>
</div>
/* accordion css start */
.accordion {
width: 70%;
}
.accordion-header {
background-color: #fff;
padding: 10px;
cursor: pointer;
}
.accordion-header:hover {
background-color: #f5f5f5;
}
.accordion-icon {
float: right;
transition: transform 0.3s ease-in-out;
}
.accordion-icon.rotate {
transform: rotate(180deg) !important;
}
.accordion-content {
padding: 10px;
display: none;
background-color: #dddfe1;
}
.accordion-content.active {
display: block;
}
/* accordion css end */
<script>
$(document).ready(function() {
// Default open accordion
var defaultAccordion = $('.accordion-header.active');
defaultAccordion.find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
defaultAccordion.next('.accordion-content').slideDown();
$('.accordion-header').click(function() {
var accordionContent = $(this).next('.accordion-content');
$('.accordion-content').not(accordionContent).slideUp();
$('.accordion-header').not($(this)).removeClass('active').find('i').removeClass('fa-angle-up').addClass('fa-angle-down');
$(this).toggleClass('active');
$(this).find('i').toggleClass('fa-angle-down fa-angle-up');
accordionContent.slideToggle();
});
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
We use cookies to improve your experience. By using our site, you agree to our cookie policy.