Tabs/Accordion

Component for organizing content within clickable tabs or an accordion that can be expanded or collapsed.

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 within steps of the How-To Page. 

    Landing Pages and Site Pages:

    • Insert a Band with the desired number of columns.
    • Within one of the Band columns, select the "Choose Component" button to insert a paragraph component.
    • The Choose Component dialogue appears. Select Tabs/Accordion. 

    How-To Page:

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

    Display as Tabs or Accordion

    Fields marked with an asterisk (*) are required.

    • Title - Enter a Title for the entire paragraph component.
    • Title Heading Level - Select an appropriate heading level. The default level is h3.
    • Display As (*) - Select either Tabs or Accordion. Descriptions and examples are provided. 

    Display As

    The process of adding content is the same regardless of the display you select. You can change the Display later, if needed. 

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

    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, as lengthy titles will cause Tabs to wrap in front of each other, cluttering the page.

    The first Tab automatically displays its content and the user must click 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.

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

    Accordions present content vertically, stacked on top of each other down the length of the page. They can accommodate more text in the Item Title than Tabs, but require the visitor to take action to expand the Accordion before page content can be viewed.

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

  • 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 Heading Level - h5
        • Item Text - Image of apples with attribution in the caption.
        • Expand Content Full Width - Checked
        • No Sidebars
      • Item Title (*) - Bananas
        • Item Title Heading Level - h5
        • Item Text - Image of bananas with attribution in the caption.
        • Expand Content Full Width - Checked
        • No Sidebars
      • Item Title (*) - Cantaloupes
        • Item Title Heading Level - h5
        • Item Text - Image of cantaloupes with attribution in the caption.
        • Expand Content Full Width - Checked
        • No Sidebars
    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

    Edit or Remove Items

    To Add a Tab:

    • Click Add Items.

    To Edit a Tab Item:

    • Click the Edit button for the item.

    To Duplicate a Tab Item:

    • Click the three (3) vertical dots to the right of the Edit button and select Duplicate.

    To Remove a Tab Item:

    • Click the three (3) vertical dots to the right of the Edit button and select Remove.

    To Remove all Tabs:

    • Click the Remove button at the top right of the Tabs/Accordion section.
  • 5

    Reorder Items

    To reorder Tabs:

    • Use row weights. Change the number in the dropdown menu to set the order in which the items should appear. The item with the smallest number appears first.
  • 6

    Save

    • After creating Tabs for Accordions, click the Save button at the bottom of the Edit page to save the page and view results.
    Save button