hut-accordion
HTML UI Toolkit accordion component
Check out the example!
An accordion where only one section can be opened at a time from multiple sections.
Example
Use the following HTML and JS to create an accordion. When a header is clicked, it will be opened. If that section is currently opened, it will be closed.
Main Some content for main section. Cats Some cute kittens... Dogs Some cute puppies...
var Accordion = ; var myAccordion = document; // Open the dogs sectionmyAccordion; // Collapse the currently opened sectionmyAccordion;
JS Reference
new Accordion(element)
Creates a new accordion and attaches the event handlers. When created, no sections are selected.
#selected
Contains the currently selected .accordion-section
element, or null
if no
section is selected.
#toggle(element)
If the section indicated by element
is currently selected, it will be closed.
Otherwise the section will be selected.
#select([element])
Selects a section. This will collapse any previously selected section. element
must be a .accordion-section
element or else null
. If element
is null
or
undefined
, the currently selected section will be collapsed and no new section
will be selected.
Event: selected(element)
Triggered when the selected section changes. element
will be a
.accordion-section
element or else null
if no section is selected.