Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Accordions

Accordions allow you to create expandable and collapsible pieces of content.

Guidance

The accordion component allows users to expand or collapse content. The component consists of a set of vertically stacked headings that the user clicks on to expand hidden panels. Never hide critical information or functionality within an accordion component, as this can make it difficult for users to find and use. Accordions should be used sparingly and only where appropriate. Accordions can be used in these situations:

  • Presenting secondary content: Use accordions to present content that you don’t want to interfere with the main task. For example, additional details or information that only applies to a small amount of people or specific audience.
  • Presenting a choice between mutually exclusive answers: When the user is presented with a choice between mutually exclusive answers, accordions can help make sure they only see the answer that is appropriate to them. This can reduce the risk of them viewing the wrong information for their situation.

Do

  • Use clear and descriptive headings to help users understand what is contained within the hidden panel.
  • Enable the "open all" functionality to allow users to perform the action to all panels.
  • Use <h2>, <h3> and <h4> headings that are appropriate to the content structure of your page. The component will resize them visually.

Don’t

  • Hide critical information or functionality within an accordion.
  • Use with very short content: lists or paragraphs instead.
  • Use with very long content: use sections or separate pages
  • Use an accordion to shorten a page.

Accordion

  1. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

  2. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

  3. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

HTML

<div class="gnb-accordion-pane">
	<a href="#" class="gnb-accordion-toggleall" data-open="false">Open all</a>
	<ol class="gnb-accordion" data-aria-accordion data-multi>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
	</ol>
</div>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-accordions-1.0.0.js"></script>

Accordion with cards

Open all

  1. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

  2. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

  3. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

HTML

<div class="gnb-accordion-pane">
	<a href="#" class="gnb-accordion-toggleall" data-open="false">Open all</a>
	<ol class="gnb-accordion-cards" data-aria-accordion data-multi>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<h4>Heading</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
					porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
					interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
					risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
				</p>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<h4>Heading</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
					porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
					interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
					risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
				</p>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<h4>Heading</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
					porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
					interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
					risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
				</p>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
	</ol>
</div>  

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-accordions-1.0.0.js"></script>

Accordion with steps

Open all

  1. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

  2. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

  3. Accordion item

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Call to action

HTML

<div class="gnb-accordion-pane">
	<a href="#" class="gnb-accordion-toggleall" data-open="false">Open all</a>
	<ol class="gnb-accordion-steps" data-aria-accordion data-multi>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Accordion item</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Call to action</a></p>
			</div>
		</li>
	</ol>
</div>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-accordions-1.0.0.js"></script>