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 5: Panels

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

Title: CherriesText: 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: CherriesText: 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

Step 6: Finishing up

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