# Accordion

With this JavaScript module you will obtain the basic utility of an accordion component. This script provides the .active class when you click on button element, use this in your CSS styles for show/hide elements.

NPM Installation

npm install @choostdev/accordion

How to use

// Import the accordion module
import accordion from '@choostdev/accordion'

accordion({
  buttonClass: 'accordion-button',
  panelClass: 'accordion-panel'
})

Remember add type="module" on your html script. Example: <script type="module" src="/main.js"></script>

Parameters

buttonClass: Indicates the class of the DOM element that will have the click action. Default value: accordion-button

panelClass: Indicates the class of the DOM element that will have the unfold action. Default value: accordion-panel

HTML Example

<!-- Example of html -->
<div class="accordion">
  <div class="accordion-button">Accordion button</div>
  <div class="accordion-panel">This is a panel of accordion example</div>

  <div class="accordion-button">Accordion button</div>
  <div class="accordion-panel">This is a panel of accordion example</div>

  <div class="accordion-button">Accordion button</div>
  <div class="accordion-panel">This is a panel of accordion example</div>
</div>

Help for your CSS

This script provides the .active class when you click on the button element. Use for show elements.

<!-- Example of active elements -->
<div class="accordion">
  <div class="accordion-button">Accordion button</div>
  <div class="accordion-panel">This is a panel of accordion example</div>

  <!-- 👇 You are clicked in this element -->
  <div class="accordion-button active">Accordion button</div>
  <div class="accordion-panel active">This is a panel of accordion example</div>

  <div class="accordion-button">Accordion button</div>
  <div class="accordion-panel">This is a panel of accordion example</div>
</div>

/* Example of css */
.accordion .accordion-panel {
  display: none;
}

.accordion .accordioni-panel.active {
  display: block;
}