https://github.com/fgm/accordion

A tiny VanillaJS accordion library
https://github.com/fgm/accordion

accordion vanilla-javascript vanilla-js

Last synced: 9 days ago
JSON representation

A tiny VanillaJS accordion library

• Host: GitHub
• URL: https://github.com/fgm/accordion
• Owner: fgm
• License: mit
• Created: 2013-06-09T09:13:35.000Z (over 11 years ago)
• Default Branch: main
• Last Pushed: 2023-08-08T14:18:54.000Z (over 1 year ago)
• Last Synced: 2024-10-19T16:28:44.449Z (27 days ago)
• Topics: accordion, vanilla-javascript, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 39.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# accordion

A tiny VanillaJS Accordion library. 

Should work on all current 2020 browsers.

## Usage

- Prepare your markup as a plain HTML Definition List with class `accordion`.

- Link your version of `accordion.css` to it, adjusting as needed.

- Load `domready.js` and `accordion.js` in your page, or use your own `DOMready`

  library

- Instantiate the accordion as:

```ecmascript 6

domReady(() => {

  const el = new WofAccordion(window);

  if (!el.isValid) {

    return;

  }

  window.wofAccordion = el; // Optional: convenient for debug.

});

```

Only a single Accordion will work on any given page.

## Markup

Accordion uses a smaller set of classes than its previous versions.

The expected structure is a plain HTML Definition List with class `accordion`:

    


      
pane header

      
pane item

      
pane item

      

      
...

      

...

    



  

At most one item may have the `accordion-active` class at the same time, and

should not contain a link, as it represents the current page.


## Changes

- New version uses vanilla JS, no longer depending on jQuery.

- New version is 4 times smaller the the jQuery version, not even counting jQuery

  itself.