Acquia Cohesion renames to Site Studio from version 6.2. Tell me more.

    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:

    1. Navigate to a component or a template with the Layout canvas
    2. Click the + button on the Layout canvas
    3. 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.

    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.


    • 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

    • 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.


    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket


    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.