hut-accordion

HTML UI Toolkit accordion component

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.

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.

<div id="my-accordion" class="hut-accordion">
    <div class="accordion-section">
        <header class="accordion-header">
            <h3>Main</h3>
        </header>
        <section class="accordion-content">
            <p>Some content for main section.</p>
        </section>
    </div>
    <div class="accordion-section">
        <header class="accordion-header">
            <h3>Cats</h3>
        </header>
        <section class="accordion-content">
            <p>Some cute kittens...</p>
        </section>
    </div>
    <div id="dog-section" class="accordion-section">
        <header class="accordion-header">
            <h3>Dogs</h3>
        </header>
        <section class="accordion-content">
            <p>Some cute puppies...</p>
        </section>
    </div>
</div>
var Accordion = require('hut-accordion');
 
var myAccordion = new Accordion(document.querySelector('#my-accordion'));
 
// Open the dogs section 
myAccordion.select(document.querySelector('#dog-section'));
 
// Collapse the currently opened section 
myAccordion.select(null);

Creates a new accordion and attaches the event handlers. When created, no sections are selected.

Contains the currently selected .accordion-section element, or null if no section is selected.

If the section indicated by element is currently selected, it will be closed. Otherwise the section will be selected.

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.

Triggered when the selected section changes. element will be a .accordion-section element or else null if no section is selected.