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

File Size: 6.76 KB
Views Total: 1461
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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.


4. Dress up the accordion using your own CSS.

#my-accordion {
  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;
  padding: 15px;
  border-radius: 5px;

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

5. Override the default CSS classes.

  collapsibles: ".collapsible",
  togglers: ".toggler",
  activatedAccordionClass: "jquery-accordion"

6. Destroy the accordion instance.


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