Accordion Component

Use the arrow keys or spacebar to go to the next slide.

Make this presentation full screen for best effect.

  • The Accordion component is allowing a user to have section of content on the page to be in a collapsable format, only initially displaying only Titles, Subtitles, and Labels.
  • This component will primarily be used to display course information on the People content type, but might be useful elsewhere to display content.
  • Other situations for where this component can be used would be on an FAQ page, as well as a history or timeline page.

What is a Accordion?

Below is a list of available field that are a part of the Accordion component:

  • Accordion Title
  • Accordion Subtitle
  • Accordion Label 1
  • Accordion Label 2
  • Accordion Content

The component itself will also have a section title. This would be used for the overall heading and title of what you would be calling this component. For example, if you will be using the Accordion component for different courses, the title could be something along the lines of Courses

Available Item Fields

Accordion (backend)

Accordion

1
2
3
4
5
6
  1. Accordion Section Title
  2. Accordion Title
  3. Accordion Subtitle

4. Accordion Label 1

5. Accordion Label 2

6. Accordion Content

Adding Multiple Accordions

By default when creating an Accordion, only one Accordion Item is created. For the most part, you will have several Accordion Items within an Accordion. To add multiple Accordion Items within the same Accordion, just click the "Add Accordion Item" button.

Rearranging and Ordering Accordions

If you have multiple Accordion Items, you can change the order as to which the cards will appear. To do so, right above each item, you will have the ability to drag and drop each one to determine the order.

Removing Accordions and Items

Also, if you would like to remove one of the items you created, all you have to do is click the three stacked dots, and a remove button associated with the card you would like to remove will appear. There will be a confirm removal that appears so if you didn't mean to remove an item, you can cancel it or you can confirm the removal.

Congratulations!
You have completed the

Accordion Component Walkthrough

use the back button to go back to where you were

Accordion Component

By harvardms

Accordion Component

In this lesson you will learn about what the Accordion component is and how to use it within within Drupal. This covers different use cases as well as how it will visually look on your site.

  • 1,827