Accordions

Accordions can be used to show headings but hide content by default until a heading is clicked on.

Use accordions when you have a lot of content and most users will only want to see a subset of it. Avoid accordions if most users will want to see all of the information at once. 

Options include: 

  1. Heading level (h2, h3, etc), which should be based on the rest of the page's content.
  2. Whether the first item is open by default.
  3. Whether more than one item can be viewed at the same time.

Based on jQuery Accessible Accordion System, using ARIA.

Example

Expand all

Sample Heading One

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Heading Two

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Heading Three

Aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Code

Accordion HTML
<div class="js-accordion-test" 
    data-accordion-prefix-classes="accordion"
    data-accordion-all-opened=false>

    <a href="#openAll" class="js-accordion__expand-all">
        Expand all
    </a>

    <div class="js-accordion__panel" 
        data-accordion-opened="true">

        <h2 class="js-accordion__header">
            First Item
        </h2>
        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>

    <div class="js-accordion__panel" 
        data-accordion-opened="false">

        <h2 class="js-accordion__header">
            Second Item
        </h2>
        
        <p>
            Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </p>
    </div>

    <div class="js-accordion__panel" 
        data-accordion-opened="false">

        <h2 class="js-accordion__header">
            Third Item
        </h2>
        
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. 
        </p>
    </div>
</div>
Accordion JS
<script>
    $(function () {
        $('.js-accordion-test').accordion({ 
            buttonsGeneratedContent: 'html', 
            multiselectable: false
        });
    });
</script>

Includes

CommonSpot Registered Resource
// Load accordion registered resources
server.commonSpot.udf.resources.loadResources("accordion");

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.