Add a Tab or Accordion Menu

Owned by Rachel Klingler
Last updated: Apr 06, 2015Version comment
4 min read

Accordion and Tab menus are a way to organize a lot of content on one page. They dynamically display only a part of the content of the page at once.

A tab or accordion menu can be created using Zuse Create or the Classic Editor. The Classic Editor is a way for Authors to create Tab or Accordion Menus, and works better when you aren't planning to have to edit the information in the menu very often. If possible, use Zuse Create if you will need to update your menu frequently.

Add a Tab or Accordion Menu

  1. To add a tab or accordion menu using the Classic Editor, position your cursor in the location you would like to add the menu and select the tab/ accordion menu button from the toolbar.

    To add a tab or accordion menu using Zuse Create, make sure you understand creating pages using Zuse Create. Insert a new module on your page and select tab or accordion menu.
  2. In the dialogue that pops up, select the Tab or Accordion radio button to specify which type of menu you'd like to use. If you are using an Accordion menu, using the check boxes you can also choose whether to include "open/close all" buttons and if you would like to use the simple toggle style (with the triangular expandable bullets).
  3. Next, you can add items (the tabs or accordions). There are two types of items, simple and pages. Simple items are text with options similar to what you get in the Classic Editor. Page items are pages, which can be created using the Classic Editor or Zuse Create, so they can contain any of the features a page can contain (including multiple columns, images and module features).
  4. To make a simple item, click the Add new item button, and populate the text. Select the Done Editing button when you have completed editing that item.
  5. To add a page item, you must have already built the page you want to use. Once you have built the page you want to serve as your tab, publish it. (For ease of organization, make the page that will become a tab a child of the page the tab menu appears on.) In the Tab/ Accordion Menu editor, choose the Add page item button. Choose the site of the page you want to display, and then select the page. Select the Done Editing button to collapse the item.
  6. You can edit or remove an item by selecting either of the options on the menu.
  7. When using the Classic Editor, once you save your menu, Shortcode will be added to your editor to specify the accordions/tabs. It should start with [tabs] or [accordion] and end with [/tabs] or [/accordion]. To avoid corrupting the shortcode, don't edit the text that was inserted by the button.

Using Anchors with Tabs or Accordions

Occasionally, you may want to link to a specific tab or accordion on your page. (For example, this link goes directly to the Staff tab of the Office Snapshot. Normally, the first tab would be open instead of the staff tab.) You can do this by using anchors.

  1. Set up the anchor on the tab.
    1. Open the Tab / Accordion Menu module to edit.
    2. Edit the item you want to link directly to.
    3. Choose the show extras link. 

    4.  Add a word with no spaces as the Anchor.

    5. Save the module.
  2. To link directly to the tab, add a /#anchor to the URL of the page with the tabs. For example, https://www.wisconsin.edu/offices/office-for-academic-and-student-affairs/ is the office snapshot and by adding #staff to the end, https://www.wisconsin.edu/offices/office-for-academic-and-student-affairs/#staff, I link directly to the staff tab.