Tab & Accordion Sections

Learn how to use Tab and Accordion sections for additional options for displaying content on a page using these step-by-step instructions

CMS Support

November 18, 2021
minute read time

Tab and Accordion sections provide alternative ways to contents large amounts of content on a singular page

Screenshot of button to add a section to a page
Screenshot of button to add tab and accordion sections

New Accordion Features!

FontAwesome Icons!

Multicolumn Half-width Accordion Labels!

Warning

 Deleting the Tab/ Accordion Items or Sections will also delete all contained content!

Adding & Editing Tab & Accordion Sections 

Tabs Sections will display links in a horizontal bar across the page that can be clicked to toggle between subsections containing content. Accordion Sections can expand and collapse to display or hide subsections containing content.

  1. Within Layout Builder, select 'Add Section'
  2. In the dark menu bar on the right, select 'One Column'
  3. Select 'Accordion Section' from the right menu bar
  4. New! Optional for Accordion Sections: Set Label Width to Half width, for a more compact two column dynamic Accordion set!
  5. Add the Tab/ Accordion Items for each Tab/ Accordion Section. For each item:
    1. Label the Tab/ Accordion item using the Item Label field.
    2. New! Optional for Accordion Sections: Add a FontAwesome Icon using the Item Icon Field. Looking for a specific icon? Check https://fontawesome.com/
    3. Set the Tab/ Accordion Item Order using the Item Weight
    4. Optional: Removing Tab/ Accordion Items: do not use the Remove Last Item button at the same time as you are adding or reordering Tab/ Accordion Items, or the wrong content may get removed. Instead:
      1. first complete adding items & changing weight. Put  Tab/ Accordion section items you plan to delete at the end of the list
      2. Click Update to save the changes
      3. then come back to re-configure the Section and remove unwanted items using the Remove Last Item button
    5. Click Update so go back to Adding Blocks to your Tab/ Accordion Subsections in Layout Builder
  6. Now The Tab/ Accordion section should be split into subsections for the Items you added. In each subsection, add desired Blocks as you would do in regular Layout Sections.
  7. When you Save your Layout. Be sure to preview your changes in the Active Draft tab before Publishing. (or the View tab, if the node hasn't been published yet.)  Blocks and paragraphs may appear different when placed in Tabs and Accordion Sections.

Any Questions, Comments, or Requests?

Contact us at [email protected]