Joose Accordion Component

A lightweight, unstyled accordion component. This component belongs to the Joose component library, but can be used completely independently.

Please see joose for the whole component library.

The package includes a basic CSS file (along with source Sass files) to handle the showing and hiding of content as an example. No styling has been applied other than simple show/hide. You can utilise the existing HTML/CSS as per the example, or you can add your own classes / selectors of your choice and customise as you wish, for example to add animations.

Installation

To install this component independently using bower use the following command:

bower install joose-accordion

To install this component independently using npm use the following command:

npm install joose-accordion

Usage

There are two types of accordion that can be created; the only difference is whether you can open one or multiple sections at once.

• Single view accordion (collapses other content)
  var componentAccordion = new joose.classes.Accordion('componentContainer', false);
  or
  <section id="accordionContainer" data-component="accordion" data-multiView="false">

• Multi-view accordion (can view more than one portion at a time)
  var componentAccordion = new joose.classes.Accordion('componentContainer', true);
  or
  <section id="accordionContainer" data-component="accordion" data-multiView="true">

On page load the script searches the page for the data-component attribute to pick up any components that haven't been manually initialised using the new keyword as demonstrated above.

Here is an example of the HTML required for the accordion:

<section id="multiViewAccordion" data-component="accordion" data-multiView="true">
    <a href="#lorem1" id="lorem1Trigger" aria-controls="lorem1">Lorem 1</a>
    <section id="lorem1" aria-labelledby="lorem1Trigger">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum mi ut turpis dictum, id mollis eros porttitor. Phasellus consectetur convallis ante, quis condimentum arcu fringilla vitae.</p>
    </section>
    <a href="#lorem2" id="lorem2Trigger" aria-controls="lorem2">Lorem 2</a>
    <section id="lorem2" aria-labelledby="lorem2Trigger">
        <p>Donec in semper odio. Fusce eu lacinia leo. Donec ultrices scelerisque velit, in malesuada neque maximus in.</p>
    </section>
    <a href="#lorem3" id="lorem3Trigger" aria-controls="lorem3">Lorem 3</a>
    <section id="lorem3" aria-labelledby="lorem3Trigger">
        <p>Praesent sed erat at risus luctus pulvinar. Aenean et rutrum odio. Sed non porta arcu.</p>
    </section>
</section>