Accordion Layout Component
The accordion component is used as a layout tool and as an alternative to using the Tabs component. Using a series of stacked panels, page content is hidden until the user opens a panel using the provided buttons.
When to use: Long pages can benefit from the use of accordions. Accordions shorten pages and reduce scrolling. Source: Nielsen Norman Group, external link
- Found in Sidekick> Layout> Accordion
- One style only
- No custom colours applied
- Do not use tab components within the accordion component
Sample Accordions:
Each of the three sample accordions have different display options selected.
How to set up the accordion:
- Open page
- In Sidekick > Content > Layout, select "Accordion"
- Drag Accordion onto page
- Double-click to edit component
- Choose display options:
- Keep one section open at a time
- Close all sections initially
- Show Open All/Close All Buttons
- Add Accordion Titles by clicking on "Add Item" [+]
- Remove items by clicking on [-]
- Move order of accordion panels by using the up and down arrows
- Click OK
Adding Content
Under each panel title, a text component is available by default; however, this component can be deleted.
Most layout and content components can be dragged and dropped into each panel.
Use the + and - icons to open and close panels.
Do not use use tabs in accordion components.
How to link to an accordion panel
On the page where the accordion is located:
- Hover over the accordion panel
- A blue "Copy Anchor" button will appear
- Click on button to copy link
- Message "Anchor Copied" will appear
- Go to the page content where you want to add the link and paste copied link
