Accordion
An accordion is a group of stacked boxes of content which can be expanded or collapsed by the user.
Variations
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Details
Usage
The accordion component is used to condense related content sections by enabling the user to expand/collapse them. In other words, it is used to save space and group together related content.
Each accordion item is composed of a header (div.header) and a content box (div.content-box). The header gives to the user an overview of the content allowing the user to decide which sections to read.
Guidelines
- Avoid to place it directly after the page title
- You can have an accordion item open by default
- Add the class
-openedto the respectivediv.headercontainer
- Add the class
- Make sure you don't open more than one accordion item by default
- Nested accordions are allowed, up to a maximum number of 4 levels
- You can have an accordion item open by default by adding the class
-openedto the respectivediv.headercontainer. - Character limits (including spaces):
- 75 characters for the title (
.title)
- 75 characters for the title (
HTML structure
Overall HTML view of an accordion component:
div.accordion
div.header (one or more)div.content-box (one or more)
Inside each div.content-box a new accordion with the same structure can be placed. Other elements can be placed either before and/or the nested accordion.
Nesting element might significantly affect the HTML markup.
Presets
Accordion presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Nested accordion | Accordions can be nested up to 4 levels. The first item of this preset has a nested accordion. |
| Basic | One single item. |
Presets are ready to use HTML structures.
Variations
Accordion variations:
| Variation | Description |
|---|---|
| Three items | This snippet is composed of 3 accordion items each of them made of 1 heading (div.title) and 1 block of collapsable content (div.content-box). |
| Nested accordion | This snippet is composed of 3 accordion items. The first item has inside a nested accodion with another 3 items. |
| Single item | This snippet is composed of 1 accordion item made of 1 heading (div.title) and 1 block of collapsable content (div.content-box). |
Most component variations are just samples of what can be achieved. Some components are flexible and expandable and this variations might not reflect all possible options.
Embedding
The accordion component can be embedded inside other component:
| Component | Description |
|---|---|
| Definition list | Definition lists embedded in accordions are used in publication lists. |
main (HTML file)
div.accordion (element)Some components can be placed/embedded inside other components. Whenever this happens, they become elements of the respective parent component and they can no longer be called components.
Nesting
The accordion component can be used as a container of other components and/or elements (a nested component becomes an element of the parent component):
| Element | Description |
|---|---|
| Definition list | Whenever a definition list is needed inside an accordion. |
| Figure | Whenever you need to add an image or chart. |
| Quote | Whenever you need to pull a quote or enhance a block of text. |
| Video | Whenever you need to add a link directly in the accordion. |
| Links | Whenever the content needs to redirect the user. |
| List | Whenever a list is needed inside an accordion. |
| Table | Whenever a table is needed inside an accordion. |
main (HTML file)
div.accordion (component)
div.headerdiv.content-box
Elements are component add-ons which can be placed directly inside the component allowing you to adapt the HTML structure to your needs. The correct markup can be checked in the element page.