Simple JQuery Accordion Collapse | Code For Developers

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.mukto.info/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-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 ...

Leave a Reply

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

If you find it useful

Buy me a coffee

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

Jquery Custom Tab

...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Sequential Fading jQuery Text Animation

This code animates text using jQuery, creating a s ...

Adding and Removing Class Based on Element Visibility in the Viewport

Add class on element if it come in view and remove ...

Cookie Popup with jQuery

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

top