JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Accessible W3C conform accordion written in ES6.
    Filed under  › 

    • 🔾23%Overall
    • 255
    • 26.5 days
    • 🕩25
    • 👥7

    Handorgel

    NPM version Dependencies Build Status Coding Style MIT License

    Accessible W3C conform accordion written in ES6. Handorgel is the Swiss German name for accordion.

    Visit the demo

    Features

    • ARIA accessible
    • Keyboard interaction
    • Extensive API
    • Animated collapsing
    • Fully customizable via CSS
    • No external dependencies
    • Lightweight (~3kb minified and gziped)

    Installation

    Package manager

    Manager Command
    npm npm install handorgel
    yarn yarn add handorgel

    CDN / Download

    File CDN
    CSS handorgel.css
    CSS (minified) handorgel.min.css
    JS handorgel.js
    JS (minified) handorgel.min.js

    Usage

    Markup

    <div class="handorgel">
      <h3 class="handorgel__header">
        <button class="handorgel__header__button">
          Title
        </button>
      </h3>
      <div class="handorgel__content" data-open>
        <div class="handorgel__content__inner">
          Content openened by default
        </div>
      </div>
      <h3 class="handorgel__header">
        <button class="handorgel__header__button">
          Title 2
        </button>
      </h3>
      <div class="handorgel__content">
        <div class="handorgel__content__inner">
          Content closed by default
        </div>
      </div>
    
      ...
    
    </div>
    

    Note: Use the heading tags that fit into your content to output semantic markup.

    CSS

    Import the SASS file from your node_modules folder to make use of the variables:

    // e.g. changing opening/closing transition times
    $handorgel__content--open-transition-height-time: .1s;
    $handorgel__content--open-transition-opacity-time: .2s;
    $handorgel__content-transition-height-time: .05s;
    $handorgel__content-transition-opacity-time: .05s;
    //...
    
    @import '~handorgel/src/scss/style';
    

    Alternatively you can just include the built CSS file inside the /lib folder file or from the CDN.

    Javascript

    Initialization (with all options and their defaults):

    var accordion = new handorgel(document.querySelector('.handorgel'), {
    
      // whether multiple folds can be opened at once
      multiSelectable: true,
      // whether the folds are collapsible
      collapsible: true,
    
      // whether ARIA attributes are enabled
      ariaEnabled: true,
      // whether W3C keyboard shortcuts are enabled
      keyboardInteraction: true,
      // whether to loop header focus (sets focus back to first/last header when end/start reached)
      carouselFocus: true,
    
      // attribute for the header or content to open folds at initialization
      initialOpenAttribute: 'data-open',
      // whether to use transition at initial open
      initialOpenTransition: true,
      // delay used to show initial transition
      initialOpenTransitionDelay: 200,
    
      // header/content class if fold is open
      headerOpenClass: 'handorgel__header--open',
      contentOpenClass: 'handorgel__content--open',
    
      // header/content class if fold has been opened (transition finished)
      headerOpenedClass: 'handorgel__header--opened',
      contentOpenedClass: 'handorgel__content--opened',
    
      // header/content class if fold has been focused
      headerFocusClass: 'handorgel__header--focus',
      contentFocusClass: 'handorgel__content--focus',
    
      // header/content class if fold is disabled
      headerDisabledClass: 'handorgel__header--disabled',
      contentDisabledClass: 'handorgel__content--disabled',
    
    })
    

    API

    Events

    Event Description Parameters
    destroy Accordeon is about to be destroyed.
    destroyed Accordeon has been destroyed.
    fold:open Fold is about to be opened. HandorgelFold: Fold instance
    fold:opened Fold has opened. HandorgelFold: Fold instance
    fold:close Fold is about to be closed. HandorgelFold: Fold instance
    fold:closed Fold has closed. HandorgelFold: Fold instance
    fold:focus Fold button has been focused. HandorgelFold: Fold instance
    fold:blur Fold button has lost focus. HandorgelFold: Fold instance

    How to listen for events:

    var accordion = new handorgel(document.querySelector('.handorgel'))
    
    // listen for event
    accordion.on('fold:open', (fold) => {
      // ...
    })
    
    // listen for event once
    accordion.once('fold:open', (fold) => {
      // ...
    })
    
    // remove event listener
    accordion.off('fold:open', fn)
    

    Methods

    Handorgel Class

    Method Description Parameters
    update Update fold instances (use if you dynamically append/remove DOM nodes).
    focus Set focus to a new header button (you can also directly use the native focus() method on the button). target: New header button to focus (next, previous, last or first)
    destroy Destroy fold instances, remove event listeners and ARIA attributes.

    Example:

    var accordion = new handorgel(document.querySelector('.handorgel'))
    
    // destroy
    accordion.destroy()
    

    HandorgelFold Class

    Method Description Parameters
    open Open content. transition: Whether transition should be active during opening (default: true).
    close Close content. transition: Whether transition should be active during closing (default: true).
    toggle Toggle content. transition: Whether transition should be active during toggling (default: true).
    disable Disable fold.
    enable Enable fold.
    focus Set focus to fold button.
    blur Remove focus from fold button.
    destroy Remove event listeners and ARIA attributes.

    Example:

    var accordion = new handorgel(document.querySelector('.handorgel'))
    
    // close first fold
    accordion.folds[0].close()
    

    Browser compatibility

    • Newest two browser versions of Chrome, Firefox, Safari and Edge
    • IE 10 and IE 11

    Development

    • npm run build - Build production version of the feature.
    • npm run demo - Build demo of the feature, run watchers and start browser-sync.
    • npm run test - Test the feature.

    License

    © 2018 Manuel Sommerhalder Released under the MIT LICENSE

    Buy Me A Coffee

    Show All