Nine Pounds of Mayonnaise

    hut-accordion

    0.1.0 • Public • Published

    hut-accordion

    NPM

    Build Status Dependency Status

    Selenium Test Status

    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.

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

    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.

    Keywords

    none

    Install

    npm i hut-accordion

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    BSD

    Last publish

    Collaborators

    • conradz