Version:

    UIKit accordion components

    Accordion components are used for adding accordions to a layout. There are two accordion components included with the UIKit,  each of which is documented below.

    Accordion container component

    The accordion container component provides the container for each Accordion item. Important information to understand about the component is listed below.

    Layout canvas elements

    • Container - The container is required to optionally add a margin below the accordion or to add a background color to the accordion.
    • Accordion container - The Accordion container provides the functionality for the accordion and the style for the accordion navigation.

    The style for the accordion navigation would typically be applied to each Accordion item. For the UIKit, the style has been applied to the Accordion container to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the accordion navigation elements. These styles are within the Generic custom style category and are: Accordion tabs keyline light textAccordion tabs keyline dark text, and Accordion tabs solid.

    Component form fields

    • Navigation style - Sets the style of the accordion navigation links. 
    • Background color - Sets a background color on the accordion container.
    • Add space below - Adds a space (margin) below the accordion. This is required if a space is desirable when adding this component above another component within the same parent layout component.

    Accordion item component

    The Accordion item provides each accordion navigation bar.

    Layout canvas fields

    • Accordion tabs item - Provides the navigation bar.
    • Container - Provides a wrapping div to the content to optionally apply padding around the content.

    Component form fields

    • Navigation label - Provides the text for the accordion navigation.
    • Padding around content - Adds padding around the content within the Accordion item.
    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

    Acquia

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