Accordions

Accordion

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="accordionExample" class="panel-group">
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
                <a data-toggle="collapse" data-parent="#accordionExample" 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="#accordionExample" 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="#accordionExample" 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.

Collapse

Button

Content in the collapsable element associated with a button.

Code

HTML

<div class="collapse-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>
    <button class="button secondary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
    <p class="collapse" id="collapseExample">
        Content in the collapsable element.
    </p>
</div>
                

Link

Content in the collapsable element associated with a link.

Code

HTML

<div class="collapse-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>
    <p>
        <a class="collapsed" data-toggle="collapse" data-target="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">
            Toggle Link
        </a>
    </p>
    <p class="collapse" id="collapseLinkExample">
        Content in the collapsable element associated with a link.
    </p>
</div>
                

Documentation

Problem Being Solved

We need a clean way to collapse areas of heavy content that may not be immediately necessary to the user.

When To Use

The collapse component should be used for content that only a few users will need to access. It can also be used when a user only needs to see detailed information for one or two items out of a long list.

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 collapse html and classes.