This package provide accordion management in a simple way

Demo on codepen

Install

To install package, run npm install @vkgp/accordion.

Usage

Javascript

import { Accordion } from '@vkgp/accordion';
 
const accordion = new Accordion();
accordion.start();

SCSS

@import "@vkgp/accordion/src/accordion";

Markup example

<div class="component--accordion">
    <div class="accordion-item">
        <div class="title accordion-trigger">
            Accordion item title
            
            <!-- Your title text/html here -->
        </div>
        <div class="text accordion-content">
            Accordion item content
            
            <!-- Your content text/html here -->    
        </div>
    </div>
</div>

add show class to your accordion-item HTMLElement to render it collapsed by default.

Custom parameters

You can specify custom project's scope parameters :

• accordionSelector: selector for accordion container, default .accordion-item
• triggerSelector: selector for show/hide trigger, default .accordion-trigger

example

import { Accordion } from '@vkgp/accordion';
 
const accordion = new Accordion({
    accordionSelector: '.myAccordionContainerClass',
    triggerSelector: '.myAccordionTriggerClass'
});
accordion.start();

You can also ovverride scss variables to match with your project's scope elements and styles :

• $accordionSelector: selector for accordion container, default '.accordion-item'
• $triggerSelector: selector for accordion trigger, default '.accordion-trigger'
• $contentSelector: selector for accordion content, '.accordion-content'
• $contentMaxHeight: value of max-height for accordeon content, default 1000vh

example

@import "@vkgp/accordion/src/accordion";

$accordionSelector: '.myAccordionContainerClass';
$triggerSelector:   '.myAccordionTriggerClass';
$contentSelector:   '.myAccordionContentClass';
$contentMaxHeight:  250px;