Accordion

Accordions are used to hide content that is shown only when a visitor chooses to expand the information. Accordions can be used in at least two cases:

  • A way to show/hide content on a page that contains a large amount of information that may or may not be pertinent to each individual user (e.g., a list of frequently asked questions).
  • A list of links beneath multiple headings on a large navigation structure (e.g., a list of stories hidden beneath the categories they belong to).
  1. Accordion Link 0
  2. Accordion Link 1
  3. Accordion Link 2
  4. Accordion Link 3
  5. Accordion Link 4
  6. Accordion Link 5

Sed ornare lorem arcu. In in justo vel nulla ultrices cursus. Morbi convallis nibh condimentum dignissim sagittis. Nulla ut porttitor quam, ac consectetur felis.

  • Phasellus pellentesque, nibh sed semper pretium.
  • Justo lorem facilisis nibh, sit amet accumsan.
  • Ligula turpis quis quam.
  • Pellentesque suscipit, justo eu porttitor hendrerit, est turpis.

Integer molestie, est at porta pulvinar, lectus quam facilisis neque, at blandit ipsum dolor ut ex. In hac habitasse platea dictumst. Donec mauris elit, auctor vel tincidunt sed, sollicitudin a orci.

  1. Phasellus pellentesque, nibh sed semper pretium.
  2. Justo lorem facilisis nibh, sit amet accumsan.
  3. Ligula turpis quis quam.
  4. Pellentesque suscipit, justo eu porttitor hendrerit, est turpis.

Sed ornare lorem arcu. In in justo vel nulla ultrices cursus. Morbi convallis nibh condimentum dignissim sagittis. Nulla ut porttitor quam, ac consectetur felis.

Integer molestie, est at porta pulvinar, lectus quam facilisis neque, at blandit ipsum dolor ut ex. In hac habitasse platea dictumst. Donec mauris elit, auctor vel tincidunt sed, sollicitudin a orci.

  • Phasellus pellentesque, nibh sed semper pretium.
  • Justo lorem facilisis nibh, sit amet accumsan.
  • Ligula turpis quis quam.
  • Pellentesque suscipit, justo eu porttitor hendrerit, est turpis.
  1. Phasellus pellentesque, nibh sed semper pretium.
  2. Justo lorem facilisis nibh, sit amet accumsan.
  3. Ligula turpis quis quam.
  4. Pellentesque suscipit, justo eu porttitor hendrerit, est turpis.

Implementation

Accordions are built using Bootstrap 3's collapse plugin to control expanding and collapsing.

To style the accordions in the Purdue templates, you need at least 4 elements:

  • accordion container — the element that contains a group of accordion(s). You need to have one accordion container for every group of accordions.
    • class: accordion
  • accordion heading — the element that expands/collapses the accordion. You need to have one accordion heading for every accordion.
    • class: accordion__heading
  • accordion content — the element that expands/collapses. You need to have one accordion content element for every accordion.
    • class: accordion__content
  • accordion item — a single item of the content that expands/collapses. You need one or more accordion items for every accordion.
    • class: accordion__item
	
<div class="accordion">
	<button class="collapsed accordion__heading" data-toggle="collapse" data-target="#unique-id-here-1" aria-controls="unique-id-here-1" aria-expanded="false">Expand/Close Button</button>
	<ul class="collapse accordion__content" id="unique-id-here-1">
		<li class="accordion__item">Accordion Item 1</li>
		<li class="accordion__item">Accordion Item 2</li>
	</ul>
	<button class="collapsed accordion__heading" data-toggle="collapse" data-target="#unique-id-here-2" aria-controls="unique-id-here-2" aria-expanded="false">Expand/Close Button</button>
	<ol class="collapse accordion__content" id="unique-id-here-2">
		<li class="accordion__item">Accordion Item 1</li>
		<li class="accordion__item">Accordion Item 2</li>
	</ol>
	<button class="collapsed accordion__heading" data-toggle="collapse" data-target="#unique-id-here-3" aria-controls="unique-id-here-3" aria-expanded="false">Expand/Close Button</button>
	<div class="collapse accordion__content" id="unique-id-here-3">
		<div class="accordion__item">Accordion Item 1</div>
	</div>
	<button class="collapsed accordion__heading" data-toggle="collapse" data-target="#unique-id-here-4" aria-controls="unique-id-here-4" aria-expanded="false">Expand/Close Button</button>
	<div class="collapse accordion__content" id="unique-id-here-4">
		<div class="accordion__item">Accordion Item 1</div>
		<div class="accordion__item">Accordion Item 2</div>
		<div class="accordion__item">Accordion Item 3</div>
	</div>
</div>
	

Modifications

There are other modifiers that can be applied to a button to change its appearance:

Colors

The accordion heading element has the following color variations available:

  • Campus Gold (default)
    • class: accordion__heading-campusGold
  • Black
    • class: accordion__heading-black
  • Ever True Blue
    • class: accordion__heading-everTrueBlue
  • 40% Gray
    • class: accordion__heading-gray40
  • 70% Gray
    • class: accordion__heading-gray70
	
<div class="accordion">
	<button class="collapsed accordion__heading accordion__heading-everTrueBlue" data-toggle="collapse" data-target="#unique-id-here" aria-expanded="false">Expand/Close Button</button>
	<ul class="collapse accordion__content" id="unique-id-here">
		<li class="accordion__item">Accordion Item 1</li>
		<li class="accordion__item">Accordion Item 2</li>
	</ul>
</div>
	

Striped

When dealing with multiple accordions in a row, it can be beneficial to visually separate them. Adding the "striped" modifier can provide that separation by alternating shades of the accordion color.

  • Accordion Item 1
  • Accordion Item 2
  • Accordion Item 1
  • Accordion Item 2
  • Accordion Item 1
  • Accordion Item 2
  • Accordion Item 1
  • Accordion Item 2
  • Accordion Item 1
  • Accordion Item 2
  • Accordion Item 1
  • Accordion Item 2
	
<div class="accordion accordion-striped">
	<button class="collapsed accordion__heading" data-toggle="collapse" data-target="#unique-id-here" aria-expanded="false">Expand/Close Button</button>
	<ul class="collapse accordion__content" id="unique-id-here">
		<li class="accordion__item">Accordion Item 1</li>
		<li class="accordion__item">Accordion Item 2</li>
	</ul>
</div>