Tabbed Content Module

Tabs are a way to present related information on a page in a compact way.

Tabs are available in two styles: 1) square corners and 2) rounded corners.

NOTE: The number of tabs and the length of the tab names should not exceed the horizontal space on a page. View your page at various widths to be sure the tabs don't wrap on smaller displays.

BEST PRACTICE: When using tabs, it’s important that the tab title is simple and clearly describes the content viewers will find on a given tab. Additionally, use tabs only when users don't need to compare the info on different tabs. Forcing viewers to switch back and forth is burdensome and is much less usable than a well-organized single-page design.

Adding the Module to Your Site

If the “KU Tabbed Content” content type is not listed as an option when you “Add Content” to your site, you will need to request the module be enabled for that site. Select “Request Tabbed Content Module” below and fill in your site-specific information in the body of the email.

The module works somewhat similarly to Slideshow Slides and Person Profiles in that each tab is created individually then brought together in a General Content Type page using a shortcode (see options below).

How to Use the “KU Tabbed Content” Content Type

  1. If you haven’t done so, create and publish a General Content page to house your tabs. This needs to be done first because you will reference this page in Step 6. 
  2. Click on Add Content in the gray shortcut bar in the admin console. Select KU Tabbed Content.
  3. First enter the title for your tab in the Tab Title in the field.
  4. Below that field is a dropdown menu. This field only has two choices: “None” and “Yes.”
    • Select “Yes” if you want this tab to be the default tab (i.e., the tab that is open when you land on the page).
  5. Enter your content in the Tab Content field.
  6. Enter in the title of the page in the Appears On. This is an autocomplete field that will search through all the titles of pages that are available on your site looking for a match. This tells the module which page your tabs will appear on.

    Autocomplete of the Appears On field.

  7. Publish the tab title and tab content and repeat Steps 2-6 as often as necessary. Note: This content type allows you to enter only one tab title and tab content at a time.
  8. Go to the page you created in Step 1. You will need to enter a short code to pull in the tabs you created. There are two style options: 1) Squared Tabs and 2) Rounded Tabs. Select your preferred short code option below and copy and paste it into your page to pull in your questions and answers and section headers. Note: Be sure to paste the short code in the body of your page using the default view, not the source view.
    • Squared Tabs Style Short Code:
      [view:ku_tabbed_content=squared]
      Example:

      Square tabs example

    • Rounded Tabs Short Code:
      [view:ku_tabbed_content=rounded]
      Example:

      Rounded tabs example

How to Reorder Tabs

In your unit/dept sidebar (usually to the right of the screen when viewed on a desktop computer), you will see a Reorder Tabs block. Within that block you can click and drag to reorder the tabs listed on your page and you can click on a tab's Edit link to make updates to that tab.

Reorder Tabs block.  Click & Drag to reorder with links to edit individual tabs.

Note: Only Site Admins, Editors, or Contributors who are logged into your Drupal site will be able to see and manipulate this block.


CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.