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. See examples.

    Locating the accordion tabs container element

    To find the Accordion tabs container element:

    1. Navigate to a page or 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.

    accordion-tabs-container.png

    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

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

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

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket