accordion-style

Accordion style

Usage no npm install needed!

<script type="module">
  import accordionStyle from 'https://cdn.skypack.dev/accordion-style';
</script>

README

Accordion style

Sur un petit air d'accordéon Léon

Accordion style

Installation

npm install accordion-style

Usage


import AccordionStyle from 'accordion-style';

const element = document.querySelector('.js-accordion');
const accordion = new AccordionStyle(element);
accordion.init();



<div class="js-accordion">

    <div
        class="js-accordion-panel"
        data-accordion-open="true"
        data-accordion-deselect="true"
    >

        <button
            class="js-accordion-header"
            type="button"
            aria-expanded="true"
            aria-controls="lorem"
            >
            Toggle
        </button>


        <div
            id="lorem"
            class="js-accordion-body"
            style="overflow: hidden; max-height: 0;"
        >
            <div class="js-accordion-inner">
                Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas quibusdam excepturi accusantium voluptatum facere. Nemo vero iste recusandae, at magnam tenetur maxime ad optio veniam!<br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestias excepturi molestiae nesciunt alias. Nobis aut praesentium, commodi minus laborum ullam at quod soluta qui tempore sit eveniet dicta esse.
            </div>
        </div>
    </div>
</div>

Option

Options can be set as data-attribute.

Open

Is the panel open or not.


<button data-accordion-open="true">Button</button>

Deselect

Can the panel be deselected or not.


<button data-accordion-deselect="true">Button</button>

Example

An example is located right here, see sources.