Simple accordion package
A single accordion.
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger">Accordion title</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some sample text</p>
</div>
</div>
</div>
var accordion = new Accordion({
selector: '.js-accordion',
selectorTrigger: '.js-accordion__trigger'
});
A list of accordions. When an accordion is opened, any currently open accordions are closed.
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger">Accordion title 1</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some sample text</p>
</div>
</div>
</div>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger">Accordion title 2</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some more sample text</p>
</div>
</div>
</div>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger">Accordion title 3</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is a little but more sample text</p>
</div>
</div>
</div>
var accordion = new Accordion({
selector: '.js-accordion',
selectorTrigger: '.js-accordion__trigger',
limit: 'all'
});
A list of accordions, split into groups. When an accordion is opened, any currently open accordions that belong to the same group (e.g. group_1, group_2) are closed.
<h1>Group 1</h1>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger" data-accordion-group="group_1">Accordion title 1.1</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some sample text</p>
</div>
</div>
</div>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger" data-accordion-group="group_1">Accordion title 1.2</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some more sample text</p>
</div>
</div>
</div>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger" data-accordion-group="group_1">Accordion title 1.3</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is a little but more sample text</p>
</div>
</div>
</div>
<h1>Group 2</h1>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger" data-accordion-group="group_2">Accordion title 2.1</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some sample text</p>
</div>
</div>
</div>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger" data-accordion-group="group_2">Accordion title 2.2</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is some more sample text</p>
</div>
</div>
</div>
<div class="accordion js-accordion>
<div class="accordion__head js-accordion__trigger" data-accordion-group="group_2">Accordion title 2.3</div>
<div class="accordion__wrap">
<div class="richtext accordion__body">
<p>This is a little but more sample text</p>
</div>
</div>
</div>
var accordion = new Accordion({
selector: '.js-accordion',
selectorTrigger: '.js-accordion__trigger',
limit: 'group'
});
Option | Type | default | Description |
---|---|---|---|
selector | selector | '.js-accordion' | The element that is the base of the accordion |
selectorTrigger | selector | '.js-accordion__trigger' | The element that acts as the trigger within the accordion, ideally within the top of the selector |
limit | string | null | Determine if currently open accordions should be closed when a new one is opened. 'group' affects those within the same group, 'all' affects all within the instance of the plugin, null ignores this |
scrollTo | boolean | true | Should the opened accordion be scrolled into view? |
preDelay | int | 1 | Time elapsed before the accordion opens or closes |
postDelay | int | 500 | Time elapsed before the afterOpen or afterClose function is called |
scrollDuration | int | 500 | Time elapsed for the accordion to be scrolled into view |
openOnLoad | boolean, object | false | Should an accordion be opened on load? If the boolean value is true, then the first item is opened. If a valid element selector is provided, then this item is opened |
animate | boolean | true | Should the accordion use animations? |
toggling | boolean | true | Can an accordion be closed by clicking on it when it is open |
beforeOpen | function | empty | A function to be called before the accordion is opened |
afterOpen | function | empty | A function to be called after the accordion is opened |
beforeClose | function | empty | A function to be called before the accordion is closed |
afterClose | function | empty | A function to be called after the accordion is closed |
afterResize | function | empty | A function to be called after the window has been resized |