Application Launcher

Site Studio

Accordion tabs container

Site Studio

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

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

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.

Sets how the element displays its content.

Transition - Set the load animation
Transition speed - Set the speed of the transition in milliseconds.

Layout style - Apply a Layout custom style to the Accordion tabs container. Find more information about creating custom styles.

Element - Sets which element to use as the main content navigation.

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.

Horizontal or vertical - Sets the positioning of the tabs
Position - Sets the alignment of tabs.

Width of tabs - Sets the tab width in columns.

Tabs - Sets the height of the tabs to match
Content - Sets the height of the content to match.

Add comments - Add comments to the Element. For more information, see Adding comments to an element.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

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.

Sets how the element displays its content.

Transition - Set the load animation
Transition speed - Set the speed of the transition in milliseconds.

Layout style - Apply a Layout custom style to the Accordion tabs container. Find more information about creating custom styles.

Element - Sets which element to use as the main content navigation.

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.

Horizontal or vertical - Sets the positioning of the tabs
Position - Sets the alignment of tabs.

Width of tabs - Sets the tab width in columns.

Tabs - Sets the height of the tabs to match
Content - Sets the height of the content to match.

Add comments - Add comments to the Element. For more information, see Adding comments to an element.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Locating the accordion tabs container element

Accordion or tab

Start state

Locating the accordion tabs container element

Accordion or tab

Start state

Locating the accordion tabs container element

Accordion or tab

Start state

Transition

Custom style

Html element

Behavior

Offset scroll position

Position

Width of tabs

Match heights

Comments

Did not find what you were looking for?

Transition

Custom style

Html element

Behavior

Offset scroll position

Position

Width of tabs

Match heights

Comments

Did not find what you were looking for?