Nanometers Per Millisecond

    @kanety/stimulus-accordion

    1.1.0 • Public • Published

    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.

    Install

    npm i @kanety/stimulus-accordion

    DownloadsWeekly Downloads

    22

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    70.7 kB

    Total Files

    31

    Last publish

    Collaborators

    • kanety