@gold.au/accordion

    8.0.0 • Public • Published

    @gold.au/accordion

    Allow the user to toggle the visibility of an element

    Contents


    Install

    yarn add @gold.au/accordion
    npm install @gold.au/accordion

    back to top


    Usage

    back to top


    API

    Accordion has 3 public functions:

    Open

    AU.accordion.Open( elements, speed )

    The parameters are:

    elements The DOM element (not the container you want to open) like a button or a link; Usually DOM node/s of accordion titles you want to open. They need to have the aria-controls attribute that points to the accordion body.

    speed Animation speed in milliseconds (optional, defaults to 250ms)

    Example:

    AU.accordion.Open( document.getElementById('accordion-title'), 500 );

    Close

    AU.accordion.Close( elements, speed )

    The parameters are:

    elements The DOM element (not the container you want to close) like a button or a link; Usually DOM node/s of accordion titles you want to close. They need to have the aria-controls attribute that points to the accordion body.

    speed Animation speed in milliseconds (optional, defaults to 250ms)

    Example:

    AU.accordion.Close( document.getElementById('accordion-title'), 500 );

    Toggle

    AU.accordion.Toggle( elements, speed, callbacks )

    The parameters are:

    elements The DOM element (not the container you want to toggle) like a button or a link; Usually DOM node/s of accordion titles you want to toggle. They need to have the aria-controls attribute that points to the accordion body.

    speed Animation speed in milliseconds (optional, defaults to 250ms)

    callbacks - An object of four optional callbacks: { onOpen, afterOpen, onClose, afterClose }

    Example:

    AU.accordion.Toggle( document.getElementById('accordion-title'), 500,
      {
        onOpen: function() {
          console.log('This function will run when an accordion opens');
        },
        afterOpen: function() {
          console.log('This function will run after an accordion has opened');
        },
        onClose: function() {
          console.log('This function will run when an accordion closes');
        },
        afterClose: function() {
          console.log('This function will run after an accordion has closed');
        },
      }
    );

    back to top


    React

    Usage:

    import AUaccordion from './accordion.js';
    
    <AUaccordion header="First headline">
      Some content of the first accordion.
    </AUaccordion>
    
    <AUaccordion header="Second headline">
      Some content of the second accordion.
    </AUaccordion>
    
    <AUaccordion header="Third headline">
      Some content of the third accordion.
    </AUaccordion>

    All props:

    <AUaccordion
      header="Headline"        {/* The headline of the accordion */}
      closed={ true }          {/* Closed state, optional */}
      speed={ 250 }            {/* Speed of the animation in ms, optional */}
      onOpen={ () => {} }      {/* A function executed when the accordion opens, optional */}
      afterOpen={ () => {} }   {/* A function executed after the accordion opened, optional */}
      onClose={ () => {} }     {/* A function executed when the accordion closes, optional */}
      afterClose={ () => {} }  {/* A function executed after the accordion opened, optional */}
      dark={ false }           {/* A dark variation of the component */}
    >
      Some content for this accordion.
    </AUaccordion>

    (💡 additional props are spread onto the component)

    For more details have a look at the usage example.

    back to top


    jQuery

    To initialize the jQuery plugin make sure you have jQuery on the page and run the below code after the DOM was loaded:

    $(function() {
      $('.js-au-accordion-wrapper').AUaccordion();
    });

    You can optionally add functions to each event like so:

    $('.js-au-accordion-wrapper').AUaccordion({
      onOpen: function() {
        console.log('This function will run when an accordion opens');
      },
      afterOpen: function() {
        console.log('This function will run after an accordion has opened');
      },
      onClose: function() {
        console.log('This function will run when an accordion closes');
      },
      afterClose: function() {
        console.log('This function will run after an accordion has closed');
      },
    });

    back to top


    Dependency graph

    /accordion
    ├─ /animate
    └─ /core

    back to top


    Tests

    The visual test: https://auds.service.gov.au/packages/accordion/tests/site/

    back to top


    Release History

    • v7.0.9 - Update core package dependency to use the latest version
    • v7.0.8 - Remove --save-dev flag from readme instructions
    • v7.0.7 - Removed unused Fragment React import
    • v7.0.6 - Resolve autoprefixer warning
    • v7.0.5 - Fix pancake build path
    • v7.0.4 - Updated deprecated text-decoration-skip property to text-decoration-skip-ink
    • v7.0.3 - Remove aria-selected from accordion button
    • v7.0.2 - Removed uikit references
    • v7.0.1 - Fix issue with parent component re-rendering causing accordion to open and close
    • v7.0.0 - Changed accordion title element to use <button> instead of <a>
    • v6.0.1 - Fix issues with state not firing
    • v6.0.0 - Add accordion group in a unordered list, remove role="tab"
    • v5.0.2 - Update dependencies
    • v5.0.1 - Removing web pack dev server, updating dependencies
    • v5.0.0 - Removing unecessary aria-hidden as css display toggles screen reader ability
    • v4.0.0 - State change more specific, remove style set on html, componentDidUpdate, build scripts for Windows
    • v3.0.5 - Replace node-sass with sass
    • v3.0.4 - Change npm run watch browser-sync location
    • v3.0.3 - au-body--dark now changes accordion title colour
    • v3.0.2 - Update dependencies
    • v3.0.1 - Updating documentation
    • v3.0.0 - React accordion open by default
    • v2.0.3 - Update homepage link
    • v2.0.2 - Fix issue with scope inside AU.animate.Run
    • v2.0.1 - Fix dependencies
    • v2.0.0 - Change to focus colour and border/muted color mix
    • v1.0.1 - IE8 spacing above triangle fixed 309
    • v1.0.0 - Moved to AU namespace, added new color themes and spacing
    • v0.3.0 - Added pancake-react plugin, ES5 main file
    • v0.2.0 - Added react and jQuery component
    • v0.1.0 - 💥 Initial version

    back to top


    License

    Copyright (c) Commonwealth of Australia. Licensed under MIT.

    back to top

    };

    Install

    npm i @gold.au/accordion

    DownloadsWeekly Downloads

    18

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    13

    Last publish

    Collaborators

    • designsystemau
    • elisechant
    • dominikwilkowski