FAQ content

Guides: How to use tabbed boxes

In this article

A tabbed box allows you to divide content in a box across multiple tabs -- in other words, it's like having multiple standard boxes stack on top of each other. When a user clicks a tab in the box, then they will see the content added under that tab.

Tabbed boxes work best when you group similar content together. For example, if you had a box listing databases for a particular subject, you could have tabs for:

  • Full Text Resources
  • Abstracts & Indexes
  • Primary Sources
  • Media

As helpful as tabbed boxes can be, however, avoid having too many tabs in one box because it can make content difficult to find. Try to also keep the names of your tabs succinct to avoid the tabs displaying on multiple rows.

Tabbed box example


Adding a tabbed box

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click the  Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on  Add Box - Column 2.

Clicking the Add Box link

  1. In the Add New Box window, enter the title for your box in the Box Name field.
    • This will display in the box's heading.
    • If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.

Adding a new tabbed box

  1. Select Tabbed from the Type dropdown.
  2. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  3. If you would like to display the box without any borders, padding, or heading on the public view of your guide, select the Floating Box checkbox.
    • While editing your guide, the box will still display with borders and a heading. The only difference is that you'll see the Floating Box () icon appear in the heading.
    • However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  4. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  5. Click the Save button.

After saving your new box, it will be added to your page. To add tabs to it, follow the steps in the section below. 


Add, rename, reorder, or delete tabs

  1. While editing your guide, click on the page containing your tabbed box in the guide's navigation menu (i.e. tabs or side-navigation).

Clicking the cog icon to edit a tabbed box

  1. In the tabbed box's heading, click on the Add/Edit Tabs () icon.
    1. To add a new tab, enter a name for the tab in the empty text field at the bottom of the list and click the Create button.
    2. To rename an existing tab, change its text and click on its Update button.
    3. To delete a tab, click on its Delete button. (NOTE: this will also remove the content contained in that tab from your guide, so be careful!)
    4. To reorder your tabs, click on the double-arrow () icon and drag & drop the tab into a new position. Then, click on the Save Positions button at the bottom of the list of tabs.
  2. Click the Close button when finished.

Managing tabs in a tabbed box


Customizing the look of your boxes

One way to customize the appearance of your guides is by customizing the styles and colors of your content boxes. Want border-less boxes? Squared corners instead of rounded? Blue box headers instead of gray? These are just a few things you can do in your guide's Tab & Box Options. Tab & Box options can be set at three levels:

  • Admin users can customize the default Tab & Box Options for all guides in your system. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Group admins can customize the default Tab & Box Options for all guides in their group. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Guide owners and editors (and all admins) can customize the Tab & Box Options for individual guides. Admins have the ability to force each guide to use the same tab and box styles. If that's the case, then a guide's Tab & Box Options will be disabled.

CSS selectors for a tabbed box

If you have experience writing CSS code and would like to create advanced customizations for your tabbed box, you can add custom CSS to your site, group, or guide. Use the CSS selectors below as a starting point for your CSS rules. As a rule of thumb, we recommend starting each of your rules with one of the following selectors:

  • .s-lib-jqtabs -- use this if you want a rule to apply to all tabbed boxes.
  • #s-lib-ctabs-123456 -- use this if you want a rule to apply to a single tabbed box. Replace the 123456 with the ID of the box you want to target (you can find a box's ID by clicking the pencil icon in its header).
example of tabs showing hover and focus states
All individual tabs

To customize the appearance of all tabs, use the .s-lib-jqtabs .nav-tabs > li > a selector. You can also use the :focus and :hover pseudo-selectors to customize the appearance of the tabs on focus and on hover, respectively. This is the best way to change the style of tab borders, backgrounds, fonts, colors, and padding.

/* DEFAULT & INACTIVE TAB STYLES */
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

/* DEFAULT HOVER & FOCUS STYLES */
.nav-tabs>li>a:hover {
    border-color: #eee #eee #ddd;
}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #eee;
}

/* EXAMPLE: Change tab font size & weight; make borders light gray. */
.s-lib-jqtabs .nav-tabs > li > a {
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #efefef;
}

/* EXAMPLE: Change the tab hover color to light red */
.s-lib-jqtabs .nav-tabs>li>a:hover {
    background-color: #ecb5bd;
}
Active tab

The active tab is the tab currently being viewed by the user. By default, the styles for the active tab overrides the default styles shared by all tabs. If you are customizing the styles for both the active tab and all individual tabs (see section above), make sure that the rule customizing the active tab comes after the individual tab styles. Otherwise, the active tab's styles may be overridden.

To customize the appearance of the active tab, use the .s-lib-jqtabs > .nav-tabs > .active > a selector. You can also use the :focus and :hover pseudo-selectors to customize the appearance of the tab on focus and on hover, respectively.

/* DEFAULT ACTIVE TAB STYLES */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

/* EXAMPLE: Change the tab font and background colors. */
.s-lib-jqtabs .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #fff;
    background-color: #6f6f6f;
    border-color: #6f6f6f;
}
A specific tab

If you'd like to apply styles to a specific tab in your box, use the a[href="#s-lib-ctab-{box id}-{tab id}"]

  • Replace {box id} with the id of the tabbed box (you can find this by clicking the box's pencil icon in the header)
  • Replace {tab id} with the id of the tab. Tab id values start at 0 and increase by one, so the first tab would be 0, the second tab would be 1, and so on.
  • For example, if a tabbed box with ID 123456 had three tabs, the selectors would look like:
    • First tab: a[href="#s-lib-ctab-12345-0"]
    • Second tab: a[href="#s-lib-ctab-12345-1"]
    • Third tab: a[href="#s-lib-ctab-12345-2"]

You can use this selector to apply the same styles available to all individual tabs (see the section above). The only difference is that the styles will apply to just the selected tab.

Tab row background & border

The tabs in a tabbed box display in a row. This row can also be customized using the .s-lib-jqtabs > .nav-tabs selector. For example, you could use this to customize the bottom border of the tab row or apply a background color behind the tabs.

example of styled tab background area

Note: the tabbed background in the above screenshot is shaded for demonstration. It does not have a background by default.

/* DEFAULT STYLES */
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}

/* EXAMPLE: Change the background color to light gray */
.s-lib-jqtabs .nav-tabs {
    background-color: #ddd;
}
Tab content

The content you see when clicking on a tab (i.e. text, databases, books, and other assets) appears inside of a <div class="tab-content"></div> element. To customize this, use the .s-lib-jqtabs .tab-content selector.

diagram of box borders and their selectors

/* DEFAULT STYLES */
.tab-content {
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.s-lib-jqtabs div.tab-content {
    padding: 10px;
}

/* EXAMPLE: Hide the border from the tab content area without shifting content */
.s-lib-jqtabs .tab-content {
    border: 1px solid transparent;
}