https://github.com/kanety/stimulus-accordion

https://github.com/kanety/stimulus-accordion

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-accordion
• Owner: kanety
• License: mit
• Created: 2021-10-12T12:38:58.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-27T07:30:39.000Z (7 months ago)
• Last Synced: 2024-11-06T10:07:06.479Z (2 months ago)
• Language: JavaScript
• Size: 49.8 KB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

```javascript

import { Application } from '@hotwired/stimulus';

import AccordionController from '@kanety/stimulus-accordion';

const application = Application.start();

application.register('accordion', AccordionController);

```

Import css:

```css

@import '@kanety/stimulus-accordion';

```

Build html as follows:

```html



  
Content 1

  


    
content 1

  

  
Content 2

  


    
content 2

  



```


### Options

#### store-key

Save opened state to `sessionStorage`:

```html





```


#### opened-text, closed-text

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

```html



  
Content 1



```


### Callbacks

Run callbacks when a content is opened or closed:

```javascript

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](http://opensource.org/licenses/MIT).