Accordions: Styling your content as a collapsible accordion
The following tutorial will explain how to render content, such as a General Content Snippet, as an accordion using Component Styles.
What is an accordion?
In essence, an accordion is a piece of content that has been collapsed so that a user will only see its title and a downwards-facing arrow at the right. When the user clicks on the title, the element will expand to reveal the body of the content. If the user clicks on the title again, the element will collapse to hide the body of the content. Accordions can be useful to allow visitors to quickly skim the titles on the page, which can be desirable for things like lists of frequently asked questions (FAQ).
For the following tutorial, you will need to have webmaster-level access in order to be able to be able to edit Panel pages.
Step 1: Create the content that will be collapsed
Nearly all types of content (content snippets, nodes, mini panels, etc.) can be collapsed. For the purpose of this exercise, we will work with content snippets.
Start by navigating to “Content”.
In the top-right corner, click on the tab Snippets and then click on the link “+ Add Content Snippet”.
Select “General Content Snippet” from the list of options and fill out the fields as follows:
Title: Providing a title is not necessary at this step, as the actual title that will be displayed will be entered elsewhere. But you may still wish to add it for reference.
Body: In the Body field, add the content of your first collapsible item (e.g. the answer to your first FAQ question).
Label: In the Label field, provide a descriptive label (e.g. “FAQ - Question 1” or “Page name - FAQ question 1”).
Revision log message: Provide a message that describes your changes.
Add more general content snippets as necessary by repeating the previous steps.
Step 2: Add the content that will be collapsed
The next step is to add the content you created to a Panel page or a Mini panel. For the purpose of this exercise, we will work with Panel pages.
Navigate to “Structure” and then “Pages”.
Find the page where you wish to add the collapsible information and click on “Edit”.
In the left menu, click on “Content”.
Your page should have labeled regions, such as “Row 1 – Left” and “Row 1 – Right”. Click on the top-left gear icon of one of these regions and select “Add Content” from the dropdown menu.
A window will appear. In the left menu of this window, select “Content” and then click on “Content Snippet”.
Select the Content Snippet you created in Step 1 (e.g. “FAQ - Question 1”), set the View Mode to “Content Body”, and then click on the button “Finish”.
Step 3: Style the content added to make it collapsible
Click on the top-right gear icon of your newly added piece of content. In the dropdown menu, under Style, select “Change”.
A new window will appear. Select “Component Styles” and click on the button “Next”. On the following page, configure the following:
Display Title?: Set this to “Yes” and provide the English and French titles that will appear on the page (e.g. the first question of your FAQ).
Display Mode: Set this to “Collapsible”.
Display Mode Anchor: This field allows you to specify an anchor name that can be used for linking purposes (e.g. /page-name#anchor-name). It is recommended that you lowercase the anchor name and avoid all accents and punctuation, including spaces.
Container Type: Set this to “None”.
Spacing: Configure as necessary.
Save your changes, and then click on the button “Update and Save” to save the entire Panel page.