jq-accordion

1.0.3 • Public • Published

jQuery Accordion Build Status Bower Version

This is the fork of the 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 Victor Fernández. Licensed under the MIT License.

Installation

bower install jq-accordion --save
// or
npm install jq-accordion --save

Usage

  1. Include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  1. Include plugin's code:
<script src="dist/jquery.accordion.min.js"></script>
  1. Call the plugin:
$('.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.

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>

Contributing

Check CONTRIBUTING.md for more information.

License

MIT License © Nay Zaw Oo

Package Sidebar

Install

npm i jq-accordion

Weekly Downloads

310

Version

1.0.3

License

MIT

Last publish

Collaborators

  • nayzawoo