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.
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.
Site Studio