‚̧Newly Purchased Memories
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    accordion

    3.0.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    Accordion

    Silky-smooth accordion widgets with no external dependencies.

    npm install accordion --save
    bower install silk-accordion --save

    An simple interactive demo can be found here. More complicated and extreme demos can be found in the demos directory.

    Usage

    Include the following two files in your project:

    src/accordion.css
    src/accordion.js
    

    Layout your markup like this:

    <div class="accordion">
     
        <div>
            <h1> Heading </h1>
            <div> Content </div>
        </div>
        
        <div>
            <h1> Heading </h1>
            <div> Content </div>
        </div>
        
    </div>

    Then create an Accordion instance with a reference to a DOM element:

    var el = document.querySelector(".accordion");
    new Accordion(el);

    Options can be passed in a second argument:

    new Accordion(el, {
        onToggle: function(fold, isOpen){
            console.log(fold);   // -> Reference to a `Fold` instance
            console.log(isOpen); // -> true / false
        }
    });

    Styling

    The base stylesheet is located at src/accordion.css. Embed it into your application's existing styling, tweaking it if desired.

    Note: This stylesheet only includes properties necessary for the Accordion to function. Making it look appealing with colours and fonts is left as an exercise to the developer. Check the source of the bundled demos for some ideas.

    Using ES6 modules

    If your project uses native JavaScript modules, consider loading src/accordion.mjs instead:

    <!-- ES6+ -->
    <script type="module">
        import Accordion from "./src/accordion.mjs";
        for(const el of document.querySelectorAll(".accordion"))
            new Accordion(el);
    </script> 

    The old accordion.js file contains only ES5, and can be used as a fallback for older platforms which lack ES module support:

    <!-- Fallback to ES5 for legacy browsers -->
    <script nomodule src="src/accordion.js"></script>
    <script nomodule>
        "use strict";
        var accordions = document.querySelectorAll(".accordion");
        for(var i = 0, l = accordions.length; i < l; ++i)
            new Accordion(accordions[i]);
    </script> 

    IE8 support

    For IE8-9 compatibility, install fix-ie:

    npm install fix-ie --save
    bower install fix-ie --save

    Then link to it using a conditional comment, before any other script on the page!

    <!DOCTYPE html>
    <html lang="en">
        <head>
        <!--[if lte IE 9]>
            <script src="node_modules/fix-ie/dist/ie.lteIE9.js"></script>
        <![endif]-->
        <meta charset="utf-8" />

    This fixes IE's buggy handling of Object.defineProperty, which the Accordion makes extensive use of. fix-ie also provides oodles of helpful polyfills to fix IE8's shoddy DOM support.

    Options

    Name Type Default Description
    closeClass String "closed" CSS class used to mark a fold as closed
    disabled Boolean false Whether to disable the accordion on creation
    disabledClass String undefined CSS class marking an accordion as disabled
    edgeClass String "edge-visible" CSS class toggled based on whether the bottom-edge is visible
    enabledClass String "accordion" CSS class marking an accordion as enabled
    heightOffset Number 0 Distance to offset each fold by
    modal Boolean false Whether to close the current fold when opening another
    noAria Boolean false Disable the addition and management of ARIA attributes
    noKeys Boolean false Disable keyboard navigation
    noTransforms Boolean false Disable CSS transforms; positioning will be used instead
    onToggle Function undefined Callback executed when opening or closing a fold
    openClass String "open" CSS class controlling each fold's "open" state
    snapClass String "snap" CSS class for disabling transitions between window resizes
    useBorders Boolean "auto" Consider borders when calculating fold heights

    Install

    npm i accordion

    DownloadsWeekly Downloads

    373

    Version

    3.0.2

    License

    ISC

    Unpacked Size

    82.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar