Categories
Plugins

jq-accordion

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

Include jQuery:

Include plugin’s code:

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

            

Row

        

Row

        

Row

    

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

                    

Row

            

Row

            

Row

        

    

            Control

                    

Row

            

Row

            

Row

        

    

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

                    

Row

            

Row

            

Row

        

    

Contributing
Check CONTRIBUTING.md for more information.
License
MIT License © Nay Zaw Oo

GitHub Repo