Back to post

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:

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.

Default example

Heading - 1

Content - 1

Heading - 2

Content - 2

HTML structure

<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>

Script

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

Open multiple

Heading - 1

Content - 1

Heading - 2

Content - 2

HTML structure

<div id="multi-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>

Script

$('#multi-open [data-accordion]').accordion({
  singleOpen: false
});

Opened state

Heading - 1

Content - 1

Heading - 2

Content - 2

HTML structure

<div id="opened-state" data-accordion-group>
  <div class="open" 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>

Script

$('#opened-state [data-accordion]').accordion();