Build Accordions and Tabs

Instructions

How to add a new accordion

From the T4 Site Structure, navigate to the page you are updating. 

1. Click the Add Content button.
2. Select Accordion from the list of content types.
3. Use the following content elements:
   
   • Name: Add descriptive name of content type to be used within T4 Site Structure.
   • Main heading: Optional, used to add a main H3 heading above a group of multiple accordions.
   • Main description: Optional, used to add a main description (sentence or paragraph) prior to a group of multiple accordions. 
   • Heading: Required, used to add the heading/title of the individual accordion (this is what the page viewer will click to expand).
   • Description: Required, used to add the content within the individual accordion. Add text and images using the formatting tools, similar to a word processing program. Learn more about formatting text in T4.
   • Expand/Collapse: Select Yes on the Expand/Collapse Button if you'd like the accordions to hide and unhide all at once.
4. Click the Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Accordions can be added as a single accordion on a page or as a group of multiple accordions on a page.

How to add a new tab

From the T4 Site Structure, navigate to the page you are updating. 

1. Click the Add Content button.
2. Select Tab from the list of content types.
3. Use the following content elements:
   
   • Name: Add descriptive name of content type to be used within T4 Site Structure.
   • Tab Name: Required, used to add the heading/title of the individual tab (this is what the page viewer will click to toggle between different tabs).
   • Description: Required, used to add the text and image content within the tab. Text and images can be formatted in this field in the same way that you would in other text-based content types. Learn more about formatting text in T4.
     
     The content in the first tab immediately displays when viewed on a desktop computer. The content in subsequent tabs can only be viewed when the tab heading is selected. It is recommended to include a minimum of two tabs as it would be better to just use a general content type or an accordion if you only need one (depending on if you want to be able to expand/collapse the content or not). 
     
     When viewed on a mobile device, tabs display and function exactly the same as accordions. 
4. Click the Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Video tutorial

Additional resources

• Formatting Text in T4

You should now be confident in using accordions and tabs to organize and format text efficiently.

Accordions

On your webpage, an accordion will display as a teal-colored heading that can be expanded when a page viewer clicks on it to view additional content. 

Example

Tabs

The function of a tab on a webpage is responsive to the size of the screen that is used to view the page.

Viewed on a desktop computer

On a desktop computer, all of the content within the first tab is displayed automatically. The headings of subsequent tabs are also displayed, but the page viewer needs to click on the heading of the tab to display the content within it. 

Viewed on a mobile device

On mobile devices, tabs appear exactly like an accordion content type. The heading of each tab needs to be clicked to expand in order to view the content within that tab. A screenshot example of what it looks like on mobile device is included below. You can also see this display difference in the tab examples if you decrease/increase the size of your browser window on a desktop computer. 

Example