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 , 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.