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>
varaccordion=newAccordion({selector: '.js-accordion',selectorTrigger: '.js-accordion__trigger'});A list of accordions. When an accordion is opened, any currently open accordions are closed.
<divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger">Accordion title 1</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is some sample text</p></div></div></div><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger">Accordion title 2</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is some more sample text</p></div></div></div><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger">Accordion title 3</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is a little but more sample text</p></div></div></div>varaccordion=newAccordion({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><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger" data-accordion-group="group_1">Accordion title 1.1</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is some sample text</p></div></div></div><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger" data-accordion-group="group_1">Accordion title 1.2</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is some more sample text</p></div></div></div><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger" data-accordion-group="group_1">Accordion title 1.3</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is a little but more sample text</p></div></div></div><h1>Group 2</h1><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger" data-accordion-group="group_2">Accordion title 2.1</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is some sample text</p></div></div></div><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger" data-accordion-group="group_2">Accordion title 2.2</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is some more sample text</p></div></div></div><divclass="accordion js-accordion> <div class="accordion__headjs-accordion__trigger" data-accordion-group="group_2">Accordion title 2.3</div><divclass="accordion__wrap"><divclass="richtext accordion__body"><p>This is a little but more sample text</p></div></div></div>varaccordion=newAccordion({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 |