accordion-style v2.0.1

Accordion style

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

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.