Easy Multi Level Responsive Accordion – Jquery Accordion

jQuery Accordion is a lightweight jQuery plugin used to generate simple accordion with a bit configuration or code. It is fully responsive, CSS powered and supports to all major browsers.

Features:

• Easy to implement and user-friendly.
• Multi-level supported.
• Easy customizable with CSS.
• Supports single and multi open.
• Supports IE9+ and modern browsers.

How to use it:

1. Insert the CSS jquery.accordion.css in the header.

<link href="jquery.accordion.css" rel="stylesheet">

2. Include the Javascript jquery.accordion.js at the bottom of the web page.

<script src="jquery.accordion.js"></script>

3. Add the basic HTML to the page, you can implement multiple accordions within the same page with the same class.

<div data-accordion-group>
  <div class="accordion" data-accordion>
    <div data-control>Control</div>
      <div data-content>
        <div>Row</div>
        <div>Row</div>
        <div>Row</div>
      </div>
  </div>
  <div class="accordion" data-accordion>
      <div data-control>Control</div>
        <div data-content>
          <div>Row</div>
          <div>Row</div>
          <div>Row</div>
        </div>
  </div>
</div>

4. Initialize the plugin and we’re ready to go.

$('.accordion').accordion({
  "transitionSpeed": 400
});

Multiple useage within same page with different parameters

1. Basic HTML structure for multiple useage

<div id="single-open" data-accordion-group>
  <div data-accordion>
    <div data-control>Heading - 1</div>
      <div data-content>
      <p>Content - 1</p>
      </div>
  </div>
  <div data-accordion>
      <div data-control>Heading - 2</div>
        <div data-content>
        <p>Content - 2</p>
      </div>
  </div>
</div>

2. Basic script for multiple useage

$('#single-open [data-accordion]').accordion();

Plugin’s default configuration options:

{
  transitionSpeed: 300,
  transitionEasing: 'ease',
  controlElement: '[data-control]',
  contentElement: '[data-content]',
  groupElement: '[data-accordion-group]',
  singleOpen: true
}

Plugin’s Options:

Name	Default	Type	Description
transitionSpeed	300	int	Transition speed on miliseconds.
transitionEasing	'ease'	string	CSS value for easing.
controlElement	'[data-control]'	string	CSS selector for the element acting as a button.
contentElement	'[data-content]'	string	CSS selector for the element containing hide/show content.
groupElement	'[data-accordion-group]'	string	CSS selector for a parent element containing a group.
singleOpen	true	boolean	Opens a single accordion a time.