Simple jQuery Accordion Collapse

Custom coded Simple jQuery Accordion with toggle arrow. No need extra plugin or fremwork like bootstrap

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

Simple jQuery Accordion Collapse

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

HTML Markup
<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.

CSS for Custom accordion collapse
* {
  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

jQuery Code for accordion collapse
let faqs = $(".faq_details");
$(".faq_title").click(function () {
  faqs.slideUp();
  faqs.prev().removeClass("active");
  $(this).next().slideDown();
  $(this).addClass("active");
  return false;
});

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

jQuery cdn
<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!

Previous Code

Add Custom element item in wp nav menu

Add Element on last item of wp nav menu ...

Next Code

JS fetch post API Data in 5 min simple way

js fetch post API is very simple way. some line of ...

0 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

two × 5 =

JQuery Auto Hight

jQuery height change after a specific time interva ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Cookie Popup with jQuery

Browser cookies popup accept, store cookies in bro ...

Custom tab

...

Counter up with a simple jQuery

count down numbers with jquery ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top