Tabs/Accordion

Use the tabs/accordion paragraph type to organize information on a page so that only the first item is visible. Other items become visible only when the user clicks on them.

Tabs line up horizontally, side by side next to each other. Tabs become accordions on mobile devices and smaller screens.

screenshot of Tabs in Accordion/Tabs

Accordions are arranged vertically, one above the other. They look like the rungs on a ladder.

screenshot of Accordion in Tabs/Accordion

Tabs and accordions can be used on both landing and site pages.

Tabs work best when each one has a very short heading or title. Take, for example, an A-Z list of the names of items. Accordions are better suited for frequently asked questions and similar information that requires using more words.

Adding Tabs/Accordions

On a site page: Add Paragraph > Paragraph Type > Tabs and Accordion

On a landing page: Add Band > Tabs/Accordion

  1. Title: Include the title of the entire group of tabs.
  2. View mode: Select whether you want your items to appear in tabs or accordion format.
  3. Tab/accordion item:
    • Tab title: Enter the title of the item.
    • Tab content: Add text to the item using the text editor.
  4. Tab/accordion content paragraph: Use this option to create a card into the main content area of your item in the tab sidebar paragraph area of your tab/accordion item.
  5. Select Add Tab to add as many items as you need.
  6. Click Save.


Reorder Tabs/Accordion Items

To reorder tabs within a Tabs/Accordion group, use row weights. Change the number in the dropdown box to set the order you want the items to appear in. The item with the smallest number appears first.

Remove Tabs/Accordions

This process can remove both an entire group of tabs/accordions and individual items.

  1. Click the three vertical dots to the right of the Edit/Collapse button of the item or tabs/accordions you want to remove.
  2. Select Remove from the dropdown menu.