Simple jQuery Accordion Collapse

We are going to build a custom Accordion with a simple jQuery accordion code. The final design will be like this image below.

If you need just the main part of the jquery code click here

First let’s do the HTML part of our accordion. Do it your won way. if you want first item open then put “active” class with faq_item class

<section class="faq_area">
  <div class="faq_wrapper">
    <div class="faq_item">
      <div class="faq_title active">
        FAQ Heading 1 <span class="arrow"></span>
      </div>
      <div class="faq_details">
        <p>
          Simple jQuery Accordion Collapse
        </p>
      </div>
    </div>
    <div class="faq_item">
      <div class="faq_title">
        FAQ Heading 2 <span class="arrow"></span>
      </div>
      <div class="faq_details">
        <p>
          Custom code simple jQuery Accordion Collapse
        </p>
      </div>
    </div>
    <div class="faq_item">
      <div class="faq_title">
        FAQ Heading 3 <span class="arrow"></span>
      </div>
      <div class="faq_details">
        <p>
         jquery accordion with simple jQuery
        </p>
      </div>
    </div>
    <div class="faq_item">
      <div class="faq_title">
        FAQ Heading 4
        <span class="arrow"></span>
      </div>
      <div class="faq_details">
        <p>
         Here you need to put details of faq item
        </p>
      </div>
    </div>
    <div class="faq_item">
      <div class="faq_title">
        FAQ Heading 5 <span class="arrow"></span>
      </div>
      <div class="faq_details">
        <p>
         Put your own text for custom code accordion with jQuery
        </p>
      </div>
    </div>
  </div>
</section>

Style your jQuery Accordion UI

Put your css as you like to see. There is a basic style I put go you can have an idea.

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}
.faq_area {
  padding: 50px 0;
  background:#0A192F;
}
.faq_wrapper {
  max-width: 800px;
  margin: auto;
}
.faq_item {
  margin-bottom: 20px;
}
.faq_title {
  padding: 15px;
  background: #182846;
  color: #fff;
  font-wight: 700;
  cursor: pointer;
  font-size: 20px;
  position: relative;
}
.faq_title span.arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  width: 30px;
  height: 30px;
  background-size: contain;
  position: absolute;
  right: 20px;
  color: #fff;
  top: 0;
  margin: auto;
  bottom: 0;
  transition: all 0.5s;
}
.faq_title.active span.arrow {
  transform: rotate(180deg);
}
.faq_details {
  font-size: 18px;
  padding: 15px;
  background: #142237;
  display: none;
  color:#fff;
}
.faq_item:first-child .faq_details {
  display: block;
}

Simple jQuery Accordion Collapse code

This is the main code that work behind our custom accordion

let faqs = $(".faq_details");
$(".faq_title").click(function () {
    let clickedFaq = $(this);

    // Check if the clicked FAQ is already active
    if (clickedFaq.hasClass("active")) {
        clickedFaq.removeClass("active");
        clickedFaq.next().slideUp();
    } else {
        faqs.slideUp();
        faqs.prev().removeClass("active");
        clickedFaq.next().slideDown();
        clickedFaq.addClass("active");
    }

    return false;
});

This code snippet work with jquery. Make sure you have jQuery linked. In case you need CDN here we go…

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Check out our Easy ACF repeater Bootstrap accordion in WordPress and you can implement it with accordion without a bootstrap accordion.

Thank you!