Website Support
Virtual Visit Request info Apply
MENUMENU
  • Resources
    • Publishing Help
      • Style Guide Index
      • Keyboard Shortcuts
      • Shortcodes
      • Web Writing Guide
    • Roles
      • Overview of Roles
      • Unit Web Coordinator
      • Site Steward
    • Policies & Procedures
  • Training
    • Training
      • How to become a WordPress user
      • Request a Sandbox Site
      • Sandbox requirements
      • Training schedule
    • Additional Training Opportunities
      • Siteimprove
      • UX/UI
  • About
    • News
    • Contact Us
  • FAQs
  • Submit a Support Request
  • IN
  • Web
  • Tabs

Academic unit site support

Digital Marketing Support 928-523-1741

Business unit site support

ServiceNow 928-523-1511

Tabs

Tabs are web design components that let you stack multiple groups of content in the same space on a web page.

Watch the Tabs shortcode video

  • Overview Tab Open

  • How-To Tab Closed

  • Troubleshooting Tab Closed

Overview Accordion Open

The information you’re viewing here is being displayed in tabs. Tabs reduce the amount of page real estate used to display content. In the mobile view, the content from tabs stack up starting from the left tab and moving right.

How-To Accordion Closed

Best practice

Tips

Make sure that the tabs in a group contain parallel types of information about a single topic. Also, make sure you’ve grouped the information on each tab in ways that make sense to your site visitors, and you’ve labeled each tab using terms that are familiar to your visitors.

If site visitors are likely to want to compare two types of information, think very carefully before hiding the content in a tab. In most cases, your visitors would rather not have to click to see one set of content and then another.

Consider using tabs when…

  • You have two or more closely related headings accompanied by a medium amount of detailed content.
  • The content hidden in the tabs isn’t very short or very long or especially important for your site visitors.

Don’t use tabs when…

  • You only have a single heading and its related content to put into a tab.
  • The content you want to hide in a tab is very short.
  • The content you want to hide in a tab is very long.

How to create tabs

The tab shortcode allows you to group related content into blocks organized by up to 5 tabs. The shortcode requires a Heading 4 (H4) title and any type of content.

  1. Select tab.
  2. Select the number of tabs to include from the dropdown list.
  3. The shortcode appears in the text editor.
  4. Insert your cursor between the first set of shortcode bookends.
  5. Enter Heading 4 (H4) text for the tab label or title.
  6. Insert text and/or other elements for tab content.
  7. Repeat steps 3-6 for each tab.

Troubleshooting Accordion Closed

Check these things if your tabs aren’t behaving:

  • All shortcode brackets and slashes are present
  • Tab labels are in Heading 4 (H4) format

You can always contact the EASI Web Team with questions.

Website support
Location
Building 54
Information Technology Services
1301 S. Knoles Drive
Flagstaff, AZ 86011
Mailing Address
PO Box 5100
Flagstaff, AZ 86011
Contact Form
Email
ask-its@nau.edu
Phone
928-523-3335