Accordion

This manual is no longer in use. Instead, you can find guidelines and instructions for working on gu.se, the Student Portal, and the Hotel Portal in Redaktörsmanual Drupal.

Description

An information page should be the final destination of a visitor, which means it can be long. This means the visitor may need to scroll a lot. You can help the visitor by grouping the content and adding what’s known as an accordion, an expandable area. The accordion collapses its content into headings. When the visitor clicks a heading, the content is expanded.

The accordion is a component that can be used with Layout Builder in the “Information” section and is placed below the body text. This applies to the “Information page” and “Research page” content types.

Do as follows:

In this example, we describe how to add an accordion to an existing information page.

With the page open, click “Layout” in the row of tabs.
To add an accordion, scroll past the content you added in the Edit tab (title, summary and body text). The header image or header video is never shown in layout mode.
Add component
Click the “Add component” link on the left of the two-block section.
Select the Accordion component
In the list of components on the right, select the “Accordion” link.
Configure component
1. Heading
  Enter the heading in the “Heading” field that appears.
2. Heading level
  Specify the heading size in the “Heading level” field: H2, H3 or H4. Regardless of which heading level you choose, to visitors it will appear the same, although it will be coded as H2, H3 or H4.
3. Content
  Add your text content.
4. Save
  Click the blue “Add component” button to save.
If you want to add more than one accordion, simply repeat the process.
Now publish the changes made to the page by selecting “Published” and clicking the blue “Save changes” button.
To preview the page, click “Display” in the row of tabs. Here’s an example with five accordion components.