jQuery Accordion

Responsive, CSS powered, jQuery accordion plugin.

Jquery Accordion uses CSS transitions to animate opening/closing with a fallback to jQuery's animate when CSS transitions are not supported. It takes little configuration or code to use it on your project. Try out the demo.

Supports IE9+ and modern browsers.

Developed by @vctrfrnndz. Licensed under the MIT License.

Usage

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

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.

Events

accordion.open fires when any accordion opens

accordion.close fires when any accordion closes

accordion.toggle toggles accordion open/close when triggered on a controlElement. This will not be triggered if it affects more than one accordion while singleOpenis enabled.

accordion.refresh manually refreshes the height of an accordion. Useful when adding elements to the accordion dynamically.

Sample Structure

For a simple accordion/dropdown, use the following structure/data-attributes:

<div data-accordion>
    <div data-control>Control</div>
    <div data-content>
        <div>Row</div>
        <div>Row</div>
        <div>Row</div>
    </div>
</div>

For a group of accordions, you can use the data-accordion-group attribute on a parent, this will allow you to activate/deactivate the single open behavior by setting singleOpen to true/false.

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

Starting with opened state

To initialize the accordion with an open state just add the class .open to your accordion element.

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