Expand And Collapse Content With A Trigger Link - Accordion.js

A tiny and easy-to-style accordion plugin that enables a trigger link to expand & collapse associate content with a smooth slide effect.

Only one content panel will be open at a time. The plugin automatically closes active accordion panels when opening a new one.

How to use it:

1. Insert trigger links and accordion panels into the document as follows:

<div id="my-accordion">

  <a href="#" class="toggler">FAQ 1</a>
  <div class="collapsible">Answer 1</div>

  <a href="#" class="toggler">FAQ 2</a>
  <div class="collapsible">Answer 2</div>

  <a href="#" class="toggler">FAQ 3</a>
  <div class="collapsible">Answer 3</div>
  
  ...
</div>

2. Download and include the JavaScript jquery-accordion.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery-accordion.min.js"></script>

3. Attach the accordion function to the accordion container.

$(function(){
  $("#my-accordion").accordion();
});

4. Dress up the accordion using your own CSS.

#my-accordion {
  max-width:1000px;
  margin: auto;
}

.toggler {
  color: #fff;
  text-decoration: none;
  background-color: #009e6f;
  border-radius: 5px;
  padding: 5px 20px;
  display: block;
  margin-bottom: 5px;
}

.collapsible {
  background-color: #b7e7e7;
  margin-bottom:10px;
  padding: 15px;
  border-radius: 5px;
}

.jquery-accordion .toggler:hover {
  background-color: #33CeAf;
}

5. Override the default CSS classes.

$("#my-accordion").accordion({
  collapsibles: ".collapsible",
  togglers: ".toggler",
  activatedAccordionClass: "jquery-accordion"
});

6. Destroy the accordion instance.

$("#my-accordion").accordion('destroy');

---

This awesome jQuery plugin is developed by dali-rajab. For more Advanced Usages, please check the demo page or visit the official website.