πŸ‘† Responsive, CSS powered, jQuery accordion plugin.
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 045aeac Jul 11, 2017
Permalink
Failed to load latest commit information.
css Update demo.css Oct 21, 2014
images Update gh-pages w/ latest code Jun 25, 2014
js Revert bad change Jul 11, 2017
.gitignore gh-pages Jun 22, 2014
LICENSE gh-pages Jun 22, 2014
README.md Update README.md Nov 4, 2016
index.html Use protocol-relative URL for Google API Jul 26, 2014

README.md

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>