Akordeon - Stylish jQuery Accordion Plugin

Stylish jQuery Accordion Plugin allows you to display HTML Elements (text, images...) in an efficient accordion style.

By default , the first item is expanded on page load. You can customise your own style with its build-in APIs.

How to use it:

1. Download and include the jQuery Akordeon plugin's files on the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<link href="css/jquery.akordeon.css" rel="stylesheet">
<script src="js/jquery.akordeon.js"></script>

2. The html structure for the accordion interface.

<div class="akordeon" id="example">
  <div class="akordeon-item">
    <div class="akordeon-item-head">
      <div class="akordeon-item-head-container">
        <div class="akordeon-heading">
          First Panel
        </div>
      </div>
    </div>
    <div class="akordeon-item-body">
      <div class="akordeon-item-content">
        <p>First Content</p>
      </div>
    </div>
  </div>

  <div class="akordeon-item">
    <div class="akordeon-item-head">
      <div class="akordeon-item-head-container">
        <div class="akordeon-heading">
          Second Panel
        </div>
      </div>
    </div>
    <div class="akordeon-item-body">
      <div class="akordeon-item-content">
        <p>Second Content</p>
      </div>
    </div>
  </div>
  ...
</div>

3. Initialize the accordion with default settings.

$('#example').akordeon();

4. All possible options to customize the accordion.

$('#example').akordeon({

  // set the expanded item
  expandedItem: 0, 

  // animation speed
  expandSpeed: 200, 

  // is toggled
  toggle: false, 

  // expand text
  expandText: '–', 

  // collapse text
  collapseText: '+', 

  // shows/hides buttons
  buttons: true, 

  // hidden item
  hiddenItem: -1, 

  // sets the item order
  itemsOrder: []
  
});

Changelog:

2018-06-12

• Demo & Doc updated

---

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