https://github.com/simonsmith/jquery-accordion
Simple accordion, suitable for responsive design
https://github.com/simonsmith/jquery-accordion
Last synced: 8 months ago
JSON representation
Simple accordion, suitable for responsive design
- Host: GitHub
- URL: https://github.com/simonsmith/jquery-accordion
- Owner: simonsmith
- Created: 2012-10-23T13:39:29.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2013-02-22T22:11:42.000Z (over 13 years ago)
- Last Synced: 2024-10-18T08:37:24.415Z (over 1 year ago)
- Language: JavaScript
- Size: 129 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery Accordion
A really simple accordion that I wrote for a work project because the jQuery UI version requires 1500+ lines of code, and that's unacceptable for responsive design.
## Usage
Two ways:
__AMD Style__ (better!)
```js
require(['path/to/Accordion'], function(Accordion) {
new Accordion('.some-container', {
// options
})
});
```
Ensure you have set a path to `jquery` in `require.config` (but you knew that already!)
__Standard Style__ (less awesome)
```js
$.accordion('.some-container', {
// options
});
```
Doesn't really follow the traditional jQuery plugin style, but I prefer AMD so this was just a quick addition for non-AMD users :)
## Methods
Supports `openAllPanes` and `closeAllPanes`
Example
```js
var accord = $.accordion('.selector');
$('button.open').on('click', function(){
accord.openAllPanes();
});
$('button.close').on('click', function(){
accord.closeAllPanes();
});
```
## Options
```js
{
// Currently open pane
openClass: 'is-active-pane',
// Attached to the container when accordion is ready
activeClass: 'accordion-active',
// Anything that can be passed to jQuery animations
animSpeed: 'fast',
// Which pane to open by default
openPane: 0,
// What elements to use
selectors: {
item: '.accordion-item',
header: '.accordion-header',
content: '.accordion-content'
}
}
```
## Demo
Fiddle away! - http://jsfiddle.net/Blink/QwX8J/
Test