Skip to content

david-mears-2/stimulus-accordion

 
 

Repository files navigation

stimulus-accordion

A stimulus controller for simple accordion menu.

Dependencies

  • @hotwired/stimulus 3.0

Installation

Install from npm:

$ npm install @kanety/stimulus-accordion --save

Usage

Register controller:

import { Application } from '@hotwired/stimulus';
import AccordionController from '@kanety/stimulus-accordion';

const application = Application.start();
application.register('accordion', AccordionController);

Import css:

@import '@kanety/stimulus-accordion';

Build html as follows:

<div class="st-accordion" data-controller="accordion">
  <div><a href="#content1" class="st-accordion__icon" data-action="accordion#toggle">Content 1</a></div>
  <div class="st-accordion__content" data-accordion-id="content1">
    <p>content 1</p>
  </div>
  <div><a href="#content2" class="st-accordion__icon" data-action="accordion#toggle">Content 2</a></div>
  <div class="st-accordion__content" data-accordion-id="content2">
    <p>content 2</p>
  </div>
</div>

Options

store-key

Save opened state to sessionStorage:

<div data-controller="accordion"
     data-accordion-store-key-value="YOUR_KEY">
</div>

opened-text, closed-text

You can change header text of accordion when opened or closed:

<div data-controller="accordion">
  <div><a href="#content1"
          data-action="accordion#toggle"
          data-accordion-opened-text-param="Opened Content 1"
          data-accordion-closed-text-param="Closed Content 1">Content 1</a></div>
</div>

Callbacks

Run callbacks when a content is opened or closed:

let element = document.querySelector('[data-controller="accordion"]');
element.addEventListener('accordion:opened', (e) => {
  // e.detail.toggler: clicked element
  // e.detail.content: opened content
  console.log('opened: ' + e.detail.content.getAttribute('data-accordion-id'));
});
element.addEventListener('accordion:closed', (e) => {
  // e.detail.toggler: clicked element
  // e.detail.content: closed content
  console.log('closed: ' + e.detail.content.getAttribute('data-accordion-id'));
});

License

The library is available as open source under the terms of the MIT License.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.6%
  • SCSS 6.4%