6.20 Tabs or Expandable

The 'Tabs or Expandable' block provides an easy method to create either tabs or expandable areas.  Both of these display options allow for condensing large amounts of content into manageable chunks of information for a page visitor.

Best Usages

  • Tabs work great for condensing information that would normally be on different pages into one page. For example, information on an upcoming conference could be displayed on one page using tabs: About the Conference / Program / Venue / Register.
  • Expandables work great for content such as frequently asked questions, information separated by campus, or steps a user should follow.
  • For the presentation of lengthy or complex information, sections and columns can be added to both tabs and expandables.

Example

A 'live' web page that is using an expandable block. The block of content is outlined and has an arrow pointing to it, clicking will take you to the Graduate Studies, physical therapy web page

Styles & Usage

The style types that are available for this block are listed below:

Tabs

Type 1: Light Option

image of tabs with light design option

Type 2: Dark Option

image of tabs with dark design option

Type 3: Blue-Gold Option

image of tabs with blue and gold design option

Type 4: White

Expandables

Expandables have an option to expand and collapse all buttons option. You can also have an expandable open by default.
See an example in our writing style guide.

expand all button for expandablescollapse all button for expandables

Type 1: H2 Heading

Type 2: H3 Heading

Type 3: H4 Heading

Type 4: Gray Heading

Type 5: White Heading

The diagrams below will help you determine where this block can be used. The "Y" inside the box, green yes square, means this block can go in to this column or space. The ''N' inside the box, red no square means this block can't go in this column or space.

Tabs

Flex Page with No Sidebar

The tabs block may be used in all columns wider than 3 on the flex page with no sidebar template.

Flex Page with Sidebar

The tab block may be used in all columns, but not in the sidebar on the flex page with sidebar template.

Expandables

Flex Page with No Sidebar

The expandable text block may be used in any column on the flex page with no sidebar template.

Flex Page with Sidebar

The expandable block may be used in any column on the flex page with sidebar template.

Tabs

Naming Convention

  • Name of block should always begin with tabs-sm-

Please be sure to double check your naming structure to ensure there are no spaces in between any words or dashes. Any space in the name will disrupt the functionality of your block.

Correct: tabs-sm-fall-signup

Incorrect: tabs-sm -fall-signup

Character Limits

  • N/A

What can I add to this block?

  • Links? Yes
  • Other Blocks? Yes

Expandables

Naming Convention

  • Name of block should always begin with exp- and should never end with a number

Character Limits

  • Tab Text/Headings - 15 characters
  • Content - unlimited

What can I add to this block?

  • Links? Yes
  • Other Blocks? Yes, but use with caution. 
    • Images or Slideshow
    • Links - Featured or Related
    • Basic Text - plain or boxed
  • Columns? Yes
  • Sections? Yes