Press "Enter" to skip to content

Simple and Easy Pretty Accordion Component In jQuery Plugin

jquery-petty-Accordion is an ultra-small, Bootstrap-compatible, and extremely fast accordion component written in jQuery.

accordion jquery examples with source code, simple jquery accordion, accordion menu jquery, accordion jquery plugin, jquery collapse toggle, simple accordion

How to make use of it:

1. Load  nioicon.css for the expand/collapse icons.

<link rel="stylesheet" href="assets/css/nioicon.css" />

2. Load  nioicon.css for the expand/collapse icons.

<ul class="accordion-list">
  <li class="accordion-list-item open">
    <h5 class="accordion-title">
      Accordion 1
      <span class="ni ni-minus"></span>
    </h5>
    <div class="accordion-desc">
      <p>
        Accordion 1 Content (Open On Page Load)
      </p>
    </div>
  </li>
  <li class="accordion-list-item">
    <h5 class="accordion-title">
      Accordion 2
      <span class="ni ni-minus"></span>
    </h5>
    <div class="accordion-desc">
      <p>
        Accordion 2 Content
      </p>
    </div>
  </li>
  <li class="accordion-list-item open">
    <h5 class="accordion-title">
      Accordion 3
      <span class="ni ni-minus"></span>
    </h5>
    <div class="accordion-desc">
      <p>
        Accordion 3 Content
      </p>
    </div>
  </li>
  ...
</ul>

3. The most important JavaScript (jQuery script) to activate the accordion.

$(function () {
  if ($('.accordion-list').length) {
    $('.accordion-list').on('click', '.accordion-title', function (e) {
      e.preventDefault();
      // remove siblings activities
      $(this).closest('.accordion-list-item').siblings().removeClass('open').find('.accordion-desc').slideUp();
      $(this).closest('.accordion-list-item').siblings().find('.ni').addClass('ni-plus').removeClass('ni-minus');

      // add slideToggle into this
      $(this).closest('.accordion-list-item').toggleClass('open').find('.accordion-desc').slideToggle();
      $(this).find('.ni').toggleClass('ni-plus ni-minus');
    });
  }
});

4. Apply CSS styles to the accordion.

.accordion-list {
  /* your styles here */
}

.accordion-title {
  /* your styles here */
}

.accordion-desc {
  /* your styles here */
}

Simple Pretty Accordion Component, jquery petty accordion Plugin/Github, jquery accordion open and close on click


See Demo And Download

Official Website(kawsarBinSiraj): Click Here

This superior jQuery/javascript plugin is developed by kawsarBinSiraj. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

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