USU Design Tools Training

2.4.5: Accordions and Tabs

The Accordion|Tabs panel adds accordion panels or Tabs to a page.

Interface

Accordion and Tabs Interface

Add an Accordion panel to a page

  1. Open the page for editing.
  2. Launch USU Design Tools.
  3. On the USU Design Tools menu, click Accordion|Tabs.
  4. Click Accordion.
  5. In the New Panel Title box, type the name for the new panel.
  6. Press Enter or Click Plus. (Repeat Steps 5 and 6 for additional panels)
    Accordion Title Field
  7. In the Rich Content Editor, add content for the panel.
    Accordion Content
  8. Click Save.

Add a tab to a page

  1. Open the page for editing.
  2. Launch USU Design Tools.
  3. On the USU Design Tools menu, click Accordion|Tabs.
  4. Click Tabs.
  5. In the New Tab Title box, type the name for the new tab.
  6. Click Plus.
  7. In the Rich Content Editor, add content to the tab.
  8. In the Style area, select a style for the tab. The Regular style puts borders on all sides of the content area, while the Minimal style only has a top border.
  9. Click Save.

Delete a tab or an accordion panel

  1. Open the page for editing.
  2. Launch USU Design Tools.
  3. On the USU Design Tools menu, click Accordion|Tabs.
  4. Do one of the following:
    1. Click Accordion to display the list of accordion panels.
    2. Click Tab to display the list of tabs.
  5. In the list, click Delete next to the accordion or tab to delete.
  6. In the Rich Content Editor, click Save.