Accordions

Accordions can be a useful tool in dividing and segmenting information, if used judiciously. The design system features three variants, the transcript variant is used to provide accessible content for videos and images, the navigation option (featured on the right) allows for collapsible navigation.

Default

Each accordion item is controlled by the user, they decide when each item opens and closes.
While there is facility to have an accordion item open by default (see bootstrap docs), this begs the question, "why have the content in the accordion item in the first place?".
Consider the length of content within the accordion. If it is relatively short, think about not using an accordion, it is really long, perhaps a separate page is more appropriate.
By default, h2 is used in the markup, however any heading level can be used, h1-h6. Heading hierarchy is important for users of screen readers and helps them ascertain the structure of a page in an efficient manner.

This is the first item's accordion body. Any HTML can go within the .accordion-body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus ipsum, semper sit amet sollicitudin sit amet, interdum et nisi. Morbi in ullamcorper nisi. Fusce eget magna vitae lacus eleifend malesuada vel eu metus. Integer eget pellentesque magna, sit amet dignissim leo. Suspendisse potenti. Cras nec eros convallis, pretium ipsum eu, luctus magna.

This is the second item's accordion body. Any HTML can go within the .accordion-body. Aliquam sapien nibh, pretium sollicitudin convallis vitae, egestas eget velit. Vivamus faucibus auctor ultricies. Sed sed magna ante. Quisque fringilla pharetra faucibus. Phasellus non vehicula orci. In quis porttitor metus. Maecenas et nulla augue.

This is the third item's accordion body. Any HTML can go within the .accordion-body. Nulla lacinia, lacus egestas egestas varius, eros tortor varius sem, sit amet blandit nunc enim ut nisi. Praesent non nulla neque. Vivamus non erat mattis turpis ultricies efficitur.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
      <div class="accordion-body">
        First item content goes here
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
      <div class="accordion-body">
        Second item content goes here.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
      <div class="accordion-body">
        Third item content goes here
      </div>
    </div>
  </div>
</div>

Transcript

The transcript variant is only ever used as one item in isolation, supporting either a piece of video or image content. Currently, the transcript width maches the video or image width. Text within the transcript accordion is presented in font size small.

More information is available both on the Images and Video pages. An example of the transcript accordion and the code is presented below. Note that the bottom border is provided by the wrapper classes rather than the transcript itself.

How do I structure an essay? Essays have three parts: A beginning... A middle... and an end. That is, the introduction, body, and conclusion. It’s important to have structure in your essay, or you will lose the flow of your argument.

How do I write an essay introduction? Writing an essay introduction can sometimes be quite challenging. It helps to break down your introduction into three important parts: First, start by introducing your topic. Then, state your argument. And finally, outline your main points.

By doing this, your introduction should start broad and become more specific, focusing in on your essay topic. Basically, you’re letting the reader know what you’re going to discuss throughout the essay. Let’s have a look at this introduction as an example:

Self-confidence means possessing a positive, yet realistic, view of one’s self and abilities. Self-confident people have trust and faith in their abilities. Self-confidence can be affected by a variety of factors. This essay will argue that self-confidence develops through a complex interaction between a range of factors. The essay will firstly define self-confidence, and then analyse the interaction between various factors that affect the confidence of an individual. In particular, these are personality style, situational factors/life experiences self-efficacy and self-esteem.

Notice the structure: The topic and context at the start of the paragraph; the argument in the middle, and what will be covered in the essay at the end of the paragraph.

How do I write an essay body? An essay body is a series of paragraphs that support the main argument.

How do I write an essay conclusion? Your essay conclusion is written in the opposite way to the introduction: it starts narrow and becomes broad. Begin with the detail of the essay, and expand out to the bigger picture. Here’s an example of how to structure a conclusion:

Self-confidence is not ingrained within individuals and can be influenced by a variety of factors. The personality style of an individual can determine whether the individual is an introvert or an extrovert, which will affect self-confidence. Life experiences and situational factors have a large impact on the stability of personalities and confidence. Self-efficacy and self-esteem are major factors that can contribute to a lack of self-confidence. Self-confidence is essential for effective and positive engagement in all professional and personal activities.

For more information about essay writing, try the tutorials.

Thanks for watching.

<!-- START video -->
<div class="video-wrapper">
    <div class="responsive-video">
		<iframe src="https://www.youtube.com/embed/video-id" frameborder="0" 
		allowfullscreen=""></iframe>
	</div>
	<!-- START accordion item -->
	<div class="accordion-item transcript">
		<p class="accordion-header" id="Transcript-head">
		  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Transcript-body" aria-expanded="false" aria-controls="Transcript-body">
			Transcript
		  </button>
		</p>
		<div id="Transcript-body" class="accordion-collapse collapse" aria-labelledby="Transcript-head">
		  <div class="accordion-body">
			 <!-- content goes here -->
		  </div>
		</div>
	</div>
	<!-- END accordion item -->
</div>
<!-- END video -->

Wide transcript

It's possible to have a transcript accordion that is wider than 40rem (640px):

Thanks for watching.

<div class="accordion-item transcript transcript-full-width">
	<p class="accordion-header" id="Transcript-head">
	  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Transcript-body" aria-expanded="false" aria-controls="Transcript-body">
		Transcript
	  </button>
	</p>
	<div id="Transcript-body" class="accordion-collapse collapse" aria-labelledby="Transcript-head">
	  <div class="accordion-body">
		 <!-- content goes here -->
	  </div>
	</div>
</div>

Accordion on its own

A regular accordion can be deployed on its own, margins are slightly adjusted.

This is a header

<div class="accordion-item">
    <h2 class="accordion-header" id="headingSolo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSolo" aria-expanded="false" aria-controls="collapseSolo">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseSolo" class="accordion-collapse collapse" aria-labelledby="headingSolo">
      <div class="accordion-body">
        First item content goes here
      </div>
    </div>
</div>

Design system homepage