hut-accordion

HTML UI Toolkit accordion component

hut-accordion

HTML UI Toolkit accordion component

A simple accordion where only one section can be opened at a time from multiple sections.

View the live example

With the following HTML:

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

Give it accordion behavior with the following JS:

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.

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.

The base CSS style only defines basic layout and formatting of the accordion. You should add your own style when using it. Import the base style by using npm-css and add @import "hut-modal" to your stylesheet. Use the selectors defined below for your own styling.

The root of each accordion component. This element contains all the sections in the accordion.

An accordion section, which must be nested inside of the .hut-accordion element.

The .accordion-selected class is added to the .accordion-section element when that section is currently the selected section.

The header element for a section. This is nested inside the .accordion-section element.

The content element for a section. This section is normally hidden when not selected. This is nested inside the .accordion-section element.