Accordion 🔽

[Alban 🔥] Accordion is the supreme, most modern and sexy accordion package ever made 💅

Installation

npm i -S @stereorepo/accordion

Usage

The easiest, most effective way to build an accordion is to use four html elements.

First: the container

Second: the clickable element

Third: the content wrapper

Fourth: the accordion content container

How it works on paper

The container will... contain (👏) all the elements you'll need to create magic.

The clickable element (frequently your accordion title) will allow us to reveal the accordion content when clicked.

Its first and only bro : the content wrapper.

The content wrapper will be the expanding/contracting element. We will change its max-height css property to reveal/hide the accordion content.

We need a content container to know the height of our actual content.

The html

<!-- ... -->
<div class="my-accordion js-accordion">
    <p class="js-accordion-title">My title</p>
    <div class="ph-content-wrapper js-accordion-content-wrapper">
        <div class="js-accordion-content">
            <!-- Inside put your content -->
        </div>
    </div>
</div>
<!-- ... -->

Example

// You can import the vanilla Accordion
import { Accordion } from '@stereosuper/accordion';
// or the Vue.js version of it
import { AccordionVue } from '@stereosuper/accordion';

// then instanciate it
const accordions = new Accordion({
    containerSelector: '.js-accordion',
    clickedSelector: '.js-accordion-title',
    contentWrapperSelector: '.js-accordion-content-wrapper',
    contentSelector: '.js-accordion-content',
    offsetY: 100,
    scrollDelay: 200,
    noScroll: false,
    silent: true
});

// and finally watch the magic happen
accordions.initializeAccordions();

initializeAccordions

containerSelector, clickedSelector, contentWrapperSelector, and contentSelector are the four main elements composing our accordion (see 👆 there).

offsetY

This is the amount of pixels of the margin you want between the top of your window and the top of your accordion... because, yeah, by default it automatically scrolls to the top of the clicked accordion 😏

scrollDelay

Seriously... just read the fuc**** title

noScroll

You can deactivate the scroll with you want... much less SWAG, but still cool.

silent

You can deactivate the console's errors if you want (for example if you don't use bodyRouter)

The scss placeholder

To easily add the css properties you need for the accordions to work you can use the %stereorepo-accordion scss placeholder.

@import '~@stereorepo/accordion/src/accordion';

// It will search for the any .ph-content-wrapper class inside your accordion and add to this element only the properties needed
.my-accordion {
    @extend %stereorepo-accordion;
}