Tabs/Accordion

Component for organizing and condensing content within clickable tabs or an expandable accordion.

Summary

Use the Tabs/Accordion paragraph component to organize and condense page content. This component can display the information within clickable tabs or an accordion that can be expanded or collapsed by the user. You can easily change the Tabs to Accordion and vice versa. 

Audience

Editors, Publishers, and Web Managers.

How To

  • 1

    Add a Tabs/Accordion Component

    The Tabs/Accordion component can be placed on Landing Pages, Site Pages, and Catalogue Items, using Bands. They can also be placed within steps of the How-To Page Content Type.

    Inside a Band

    • Add a Band with the desired number of columns to the page.
    • Inside a column, select the Add Component button.
    • Select Article Card from the Choose Component dialogue box.

    Inside a Step on a How-To Page:

    • Within the desired Step, select the Add Tabs/Accordion button.
    • Note: On How-To Pages, content automatically displays as the Accordion and cannot be converted to Tabs. 
  • 2

    Display as Tabs or Accordion

    The process of adding content is the same regardless of the display you select. You can change the Display later, if needed. Fields marked with an asterisk (*) are required.

    • Title - Enter a Title for the entire Component.
    • Title Heading Level - Select an appropriate heading level. The default level is h3.
    • Display As (*) - Select either Tabs or Accordion. 
    A side-by-side comparison of the same content presented as Tabs vs in an Accordion
    Side-by-side comparison of the same content displayed as Tabs vs displayed as Accordion. Enlarge Image

    Notes: 

    • On mobile devices and smaller screens, Tabs automatically display as Accordions for responsiveness.
    • On How-To Pages, content automatically displays as the Accordion and cannot be converted to Tabs. 
    Accordion
    Tab/Accordion Items

    Tabs are horizontal, next to each other side-by-side across the width of the page. They work best when each one has a short Item Title. Long titles cause Tabs to wrap in front of each other, cluttering the page.

    The first Tab automatically displays its content and the user must select other Tabs to view their content. Use Tabs when you want visitors to be able to view some page content before having to take action.

    Accordions present content vertically, stacked on top of each other down the length of the page. They can hold more text in the Item Title than Tabs, but require the visitor to take action to make content available.

    Accordions are well-suited for Frequently Asked Questions (FAQs). Enter the question in the Item Title; visitors select the question to expand it and show the answer.

  • 3

    Add Items

    Provide the information for the first Item. 

    • Item Title (*) - Enter an Item Title. Visitors click the Item Title to open the Tab or expand the Accordion.
    • Item Title Heading Level - Select an appropriate heading level for the Tab item. The default level is h3
    • Item Text - Enter the content that visitors will view when this Tab or Accordion is selected.
    • Expand Content Full Width - Check or uncheck, as desired.
    • First Sidebar - Use this option to embed a different paragraph component within this Item.
    • Second Sidebar - Use this option to embed a different paragraph component within this Item. 

    Select the Add Items button and repeat the steps above for each new Tab or Accordion Item in your component. 

    Example

    The Tabs/Accordion component example below contains three Items and follows the structure outlined here: 

    • Title - Fruits
    • Title Heading Level - h4
      • Item Title (*) - Apples
      • Item Title (*) - Bananas
      • Item Title (*) - Cantaloupes
    Accordion

    Fruits

    Tab/Accordion Items
    ripe yellow bananas lined up on a produce shelf
    "Bananas" by Steve Hopson is licensed under CC BY 2.0.
  • 4

    Optional: Use Sidebars for More Components

    You can add other Components inside a Tabs/Accordion Item by using the Sidebars. 

    • Expand Advanced Settings.
    • Choose the desired Sidebar:
      • First Sidebar content appears before the Item Text of the Tabs/Accordion Item.
      • Second Sidebar content appears after the Item Text of the Tabs/Accordion Item.
    • Select the caret to expand the Component menu.
    • Select Add for the desired Component.  
    Accordion
    Tab/Accordion Items

  • 5

    Reorder Items

    Items can be reordered numerically or by drag-and-drop. A toggle lets you switch between modes. 

    • Drag-and-drop the item to the desired placement by grabbing the handle with the mouse. If handles are not available, select Hide Row Weights to toggle modes.
    • Select Show Row Weights to reorder items numerically using the keyboard. Enter the number or select it using the dropdown menu to set the order in which the items should appear. The item with the smallest number or "lighter weight" appears first. 
    A vertical number line is placed on a scene of a hot air balloon, sailboat, and scuba diver. Explanation in caption.
  • 6

    Edit or Remove Items

    • To Add a Tab, select Add Items.
    • To Edit a Tab Item, select the Edit button for the item.
    • To Duplicate a Tab Item, select the three (3) vertical dots to the right of the Edit button and select Duplicate.
    • To Remove a Tab Item, select the three (3) vertical dots to the right of the Edit button and select Remove.
    • To Remove all Tabs, select the Remove button at the top right of the Tabs/Accordion section.
  • 7

    Save

    Select the Save button to save the page and view results.