Accordions

Example

Stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut accumsan massa, quis tincidunt urna. Nam vel sem ut purus scelerisque semper sed non elit. Proin euismod cursus porta. Mauris ut felis non neque tempor interdum. Ut feugiat hendrerit velit, eget varius nisi posuere id. In id mi nibh. Mauris id libero ac diam egestas finibus nec ut arcu. Donec viverra purus quis quam maximus volutpat. Integer non eros odio. Integer nec est lobortis, lobortis justo ut, efficitur erat. Ut cursus ante a porta posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac felis ornare, interdum sem eu, ullamcorper lectus. Praesent fermentum velit ut dui tempor, in pretium purus cursus.

This example uses a "toggle-text" span to change the toggle action text.

You can also put the toggle below the panel to expand.

Code

HTML

<noscript>
    <style>
        .collapse {
            display: block;
        }
    </style>
</noscript>
<div id="accordion" class="panel-group">
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">Accordion Example</a>
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Stuff goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut accumsan massa, quis tincidunt urna. Nam vel sem ut purus scelerisque semper sed non elit. Proin euismod cursus porta. Mauris ut felis non neque tempor interdum. Ut feugiat hendrerit velit, eget varius nisi posuere id. In id mi nibh. Mauris id libero ac diam egestas finibus nec ut arcu. Donec viverra purus quis quam maximus volutpat. Integer non eros odio. Integer nec est lobortis, lobortis justo ut, efficitur erat. Ut cursus ante a porta posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac felis ornare, interdum sem eu, ullamcorper lectus. Praesent fermentum velit ut dui tempor, in pretium purus cursus.</p>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed toggle-caption"><span class="toggle-text">Accordion Example</span></a>
            </div>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>This example uses a "toggle-text" span to change the toggle action text.</p>
            </div>
        </div>
    </div>
    <div class="panel">
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>You can also put the toggle below the panel to expand.</p>
            </div>
        </div>
        <div class="panel-heading">
            <div class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed toggle-caption"><span class="toggle-text">Accordion Example</span></a>
            </div>
        </div>
    </div>
</div>
                

Documentation

Problem Being Solved

Some users may need to review large chunks of content that can interfere with the main goal of the page.

When To Use

The accordion should be used for content that only a few users will need to access, e.g., video transcripts. It can also be used when a user only needs to see detailed information for one or two items out of a long list, e.g., Waivers browse.

When Not To use

Because accordions hide content, they should not be used when the content is pertinent to most audience members.

Formatting

  • Use straight Bootstrap accordion html and classes.
  • Add "collapsed" class to all accordions by default.
  • Don't use "panel-default" class.
  • Add a noscript tag immediately before first accordion with styling to show everything by default if js fails.
  • Panel title text has span with class "toggle-text". This can be used with custom css to change content on show/hide.