1. Tutorials
  2. Paragraph Options Layouts
  3. Accordion Tab

Accordion Tab

View the example page to see this paragraph-type in action.

Accordion Tab example

Guidelines for use

  1. This block is always used at 100% width of the page container (not the browser window).
  2. It helps organize and group contents into sections.
  3. If the Title and Body on the left-hand side are not used, the accordion tab will remain the same width to maintain a readable line length but will center in the page layout.

  1. The title of each accordion tab should reflect clearly the content inside it, as the user will not see this content until they have opened it.
  2. Make sure this is the right paragraph for the type of content you have.
  3. It is very important to write good headings for each accordion tab, as well as to be very strategic as to which content goes in them.

  1. Accordion Tabs may seem like a good solution for condensing pages, but if the content is relevant, it’s better to show all the content even if it means a longer page. It’s easier to scroll through a page rather than to guess what you should click before clicking it. Usability studies and eye tracking shows that people are willing to scroll if the info is valuable and formatted properly for scanning.
  2. Refrain from using this section for FAQs. It is always better to better arrange your content onto pages. 

 

The only visible change that happens is that the left-hand Title and Body will stack on top of the accordion tabs.

How to implement

  1. Create a Basic Page.

  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Accordion Tab".
    Selecting Accordion Tab Container Menu item

  3. Proceed to the Overview of an Accordion Tab section of this guide below.

  4. Once you've added your divider, choose your publishing options and click Save at the bottom of the page.

Overview of an Accordion Tab

Overview of Accordion Tab Paragraph

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove this entire paragraph.
  3. Anchor ID - Add a unique ID for the section. You can use this when adding a link that you'd like to open to the place on the page where the Accordion Tab exists. Please do not include any blank space (Example ID: anchor-here-1). Be sure that this ID is unique.
  4. (Optional) Title - Add a title to introduce the accordion tab content. This content will appear left-aligned next to the tabs and will be formatted as an h2.
  5. Grey Background Toggle - if this option is unchecked, the divider will appear on a white background. If it is checked, it will appear with a grey background. Only use the grey background if you are adding a divider between two paragraphs that also use a grey background.
  6. (Optional) Body - Add a block of text providing descriptive information about the accordion tab content. This content will appear below the title and left-aligned next to the tabs. It will be formatted as a paragraph.
  7. Click and drag the crosshairs handle to rearrange accordion tabs within the paragraph 
  8. Anchor ID - Add a unique ID for the section. You can use this when adding a link that you'd like to open to a specific accordion tab. Please do not include any blank space (Example ID: anchor-here-1). Be sure that this ID is unique.
  9. Tab Category - Add the text that you'd like to appear in the tab/heading portion of the accordion tab
  10. Tab Content - Add the text that you'd like to display when the accordion tab is open
  11. Add Accordion Tab - Add an additional accordion tab to the same paragraph