/javascript-accordion

Javascript accordion - tiny and simple.

Primary LanguageSCSSMIT LicenseMIT

Javascript Accordion

Javascript accordion - tiny and simple. Accordions are useful when you want to toggle between hiding and showing large amount of content.

Status

JS gzip size JS Brotli size CSS gzip size CSS Brotli size

Javascript Accordion

Options

Option Type Default Description Example
element string or object id or class DOM element Example
event string click add event listener Example
transition int 300ms opening and closing animation speed Example
activeTab int active item to be open at startup Example
multipleTab boolean false multiple accordion tab can be open at a time. Example

Usage example

Script

var accordion = new Accordion({
    element: ".accordion-container",
    event: "click",
    transition: 300,
    activeTab: 2,
    multipleTab: true
});

View

<ul class="accordion-container">
    <li class="accordion-item">
        <div class="head">
            ...
        </div>
        <div class="body">
            <div class="wrapper">
                ...
            </div>
        </div>
    </li>
    ...
</ul>

Copyright and license

Designed and built by Kenan Gündoğan
2021 Currently - Code released under the MIT License Docs released under Creative Commons