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 custom Accordion with simple jQuery accordion code. Final design will be like this image bellow.

If you need just main part of 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.mukto.info/wp-content/litespeed/localres/code.jquery.com/jquery-3.6.0.min.js"></script>

Check out our Easy ACF repeater Bootstrap accordion in WordPress and you can implement with accordion without 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 *

14 + thirteen =

Custom tab

...

Cookie Popup with jQuery

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

Sticky Menu Show when scrolling up

Header bar only show when scrolling up with simple ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

JQuery Auto Hight

jQuery height change after a specific time interva ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top