Skip to main content Skip to navigation

Add content tabs or accordions

The Tabs/accordion component enables you to display content sections as tabs or in a collapsible accordion, meaning you can add more content to your page in the same amount of space. Visitors can then select the content they want to view by selecting the relevant tab or accordion heading.

  1. Edit the page in the Components Editor.

  2. Place your cursor where you want to add the Tabs/accordion component.

  3. Go to Add special features > Tabs/accordion:

    The 'Add special features' menu in the Components Editor, with the 'Tabs/accordion' option highlighted

    Alternatively, select an existing tabs or accordion component and select Settings in the component toolbar.

  4. The Add tabbed/accordion content pop-up appears:

    The 'Add tabbed/accordion content' options pop-up

  5. Use the Display as radio buttons to select whether your content displays as Tabs or as an Accordion. Further options are available depending on your selection:

    • If you choose Tabs, select an option in the Show tabs drop-down list to display tabs Horizontally, with content below, or Vertically with tabs on the left and content in a panel to the right. If you select Horizontal, you can additionally choose to Stretch tabs to full width.

    • If you choose Accordion, use the drop-down lists to set How many items can be expanded at once and Which items should be expanded by default.

  6. For each tab or accordion item, enter a Tab title and Tab ID. Note that each Tab ID must be unique on the page.

  7. Select the up arrow and down arrow buttons to change the order in which tabs or accordion items appear.

  8. Use the Add item buttons to add a new entry at the top or bottom of the item list.

  9. To remove an unwanted item, select the Delete tab button.

  10. When you're happy with the number of items and their order, select the Add tabbed/accordion content button.

  11. The tabs or accordion appears on your page:

    Select each tab or accordion to edit its content just as you would in any other content block.

  12. When you're finished editing your page, select Publish.

Related items

Support

Email webteam@warwick.ac.uk
How to report a problem