Accordion tabs container
Use the Accordion tabs container element to add Accordions or tabs to your layouts. The Accordion tabs can be either an accordion, tab or hybrid component.
Locating the accordion tabs container element
To find the Accordion tabs container element:
- Navigate to a component or a template with the Layout canvas
- Click the + button on the Layout canvas
- Within the Elements tab, look for the Accordion tabs container element.
The Accordion tabs container element includes the following fields:
Accordion or tab
This sets the element to display as either tabs or an accordion, variable by breakpoint.
- Accordion or tab - Displays as tabs
- Accordion - Displays as accordion
- Tabs - Displays as tabs
- Collapsible - Set the accordion or tab so that it can be collapsed on a second click.
Start state
Sets how the element displays its content initially.
- Start state - Set the first tab/accordion to be open on page load
- First item to open - When the 'First open' option is selected, this value sets which content area is opened up.
Transition
Sets how the element displays its content.
- Transition - Set the load animation
- Transition speed - Set the speed of the transition in milliseconds.
Custom style
- Layout style - Apply a Layout custom style to the Accordion tabs container. Find more information about creating custom styles.
Html element
- Element - Sets which element to use as the main content navigation.
Behavior
- Scroll to on open - Scrolls to the start of the content when opened
- Create # URL - Adds a URL parameter at the end of the page URL anchoring to the content in the element.
Offset scroll position
- Offset against - Sets how the scroll position will be offset, either against an element with a class or a value in pixels.
Position
- Horizontal or vertical - Sets the positioning of the tabs
- Position - Sets the alignment of tabs.
Width of tabs
- Width of tabs - Sets the tab width in columns.
Match heights
- Tabs - Sets the height of the tabs to match
- Content - Sets the height of the content to match.
Comments
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.
