H5P Guides

Accordion Tutorial

The Accordion content type allows users to add accessible accordions to their sites. The accordion is fully responsive and works great on smaller screens as well as on desktops.

In this tutorial, you will learn:

  • When to use the Accordion content type
  • How to create an Accordion content
Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!
Get started with H5P

Video tutorial

The below video shows how Accordion may be used and how to use it:

Textual tutorial - Example

Below is the Accordion which we are going to create in this tutorial:

When to use the Accordion

The Accordion content type can be used for presenting text when there is a limited amount of vertical space. The content inside Accordion is shown in collapsible panels with a title. Each panel expands by clicking on the title.

Step 1: Topic

The topic is berries. In this tutorial, we are going to create the Accordion mentioned in the above example with four types of berries.

Step 2: Creating an Accordion

Select the New content option and choose Accordion from the list of Content types: 

Step 3: Accordion Editor

The Accordion editor should now appear and it looks like this:

Step 4: Title

Type the following text in the Title field: Types of berries

Step 5: Panels

Here, we'll add the panels that the Accordion consists of. We'll add four panels.

  • Cherries
  • Cranberries
  • Blackberries and 
  • Açaí berries

Panel 1:
The 1st panel is added by default.  It consists of a title and text. Fill in:

Title: Cherries
Text:  As raw fruit, sweet cherries provide little nutrient content per 100 g serving. Dietary fiber and vitamin C are present in the most significant content while other vitamins and dietary minerals each supply less than 10% of the Daily Value per serving, respectively. Source: Wikipedia

Add new panel using the "Add panel" button. Fill in the next three panels with the following:

Panel 2:
Title: Cranberries
Text:  Raw cranberries have moderate levels of vitamin C, dietary fiber and the essential dietary mineral, manganese, as well as other essential micronutrients in minor amounts. Source: Wikipedia

Panel 3:
Title: Blackberries
Text:  American cultivated blackberries are notable for their significant contents of dietary fiber, vitamin C, and vitamin K. Source: Wikipedia

Panel 4:
Title: Açaí berries
Text:  A powdered preparation of freeze-dried açaí fruit pulp and skin was reported to contain 533.9 calories, 52.2 g carbohydrates, 8.1 g protein, and 32.5 g total fat. The carbohydrate portion included 44.2 g of dietary fiber and low sugar value. Source: Wikipedia

Step 6: Finishing up

Save the node/article to view your finished Accordion.
You should now have a similar result as the example at the top of this page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.