Simple jQuery Accordion

Simple jQuery Accordion
Simple jQuery Accordion
Live Demo
Responsive basic CSS Cards
Section 1

Content for Section 1 goes here

Section 2

Content for Section 2 goes here

Section 3

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>



Privacy Policy | Cookies Policy | Contact Us

We use cookies to improve your experience. By using our site, you agree to our cookie policy.