Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

How do I create a tabbed box?

I want to create a box that has tabs within the box.
Last Updated: May 14, 2013  |  42903 Views

Was this helpful? 22   9
A

Answer

Creating a Tabbed Box

Creating a tabbed box (image below) involves a few steps and some HTML basics.

JQuery Tabbed Box

Steps:

1. Copy/Paste the following code into Rich Text Box Type > using Plain Text Editor.

Note: You will be doing all editing inside the Plain-Text Editor.

 

Code:

<style>
/* Default color for links inside the tabbed box */
.ui-widget-content a, .ui-widget-content a:hover, .ui-widget-content a:visited, .ui-widget-content a:active {
color: #2954d1 !important;
text-decoration: underline !important;
}

/* Default styling for selected tab titles */
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #212121 !important;
text-decoration: none !important;
cursor: text !important;
}

/* Default styling for unselected tab titles */
.ui-state-default a:hover, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #555555 !important;
text-decoration: none !important;
cursor: text !important;
}
</style>

<!-- jQuery -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#tabs" ).tabs();
});
</script>

<div id="tabs">
<ul>
<!--This section introduces the tabs and titles them-->
<li><a href="#tabs-1">My First Tab</a></li>
<li><a href="#tabs-2">My Second Tab</a></li>
<li><a href="#tabs-3">My Third Tab</a></li>
</ul>

<!--This section creates the content within each tab-->
<div id="tabs-1">
Insert content for first tab here.
</div>
<div id="tabs-2">
Insert content for second tab here.
</div>
<div id="tabs-3">
Insert content for third tab here.
</div>

</div>

2. To change tab titles, edit the text in the red.

3. This tabbed box automatically expands to fit the LibGuides box width. If you want to define the width, add the following code to the first div tag. For a standard 3-column layout, 490px is an optimal width for the middle column.

Example: <div id="tabs" style="width:490px;">

4. To add another tab:

  • Add another <li> tag after the third tab.
    Example: <li><a href="#tabs-4">My Fourth Tab</a></li>
  • Add another <div> tag after the fourth <div>
    Example
    <div id="tabs-4">
    <p>Insert content for fourth tab here.</p>
    </div>
  • Note that the items in green match. It is important that the IDs match between these two components

5. To choose another tab as the default/selected tab on page load, add the following code to the <li> tab you want to default to:

<div id="tabs">
<ul>
<!--This section introduces the tabs and titles them-->
<li><a href="#tabs-1">My First Tab</a></li>
<li><a href="#tabs-2" class="ui-tabs-active">My Second Tab</a></li>
<li><a href="#tabs-3">My Third Tab</a></li>
</ul>

6. Adding Content

Voila! You have created a tabbed Box!

For steps on adding your Tabbed Box to your LibGuides Homepage check out this Guide. 


JQuery CSS


Customizing Tab Colors

You will paste this code at the top of the Plain-Text Editor, before the first line of code: <!-- jQuery -->.

Code:

<style>
li.ui-tabs-active a { background: pink !important; }
.ui-tabs-anchor {background-color: gray;}
</style>

  • li.ui-tabs-active: selected tab;
  • .ui-tabs-anchor: all other tabs

Note: Change the colors to whatever value you'd like!

customized colors

 


Using Images for Tabs

If you want to use custom images for your tabs rather than changing the tab color, you will need to:

  • Download this template for tab images
  • Save two copies of this file:
    • One for the default selected Tab,
    • And another for the unselected Tabs (ignore this step if you want to keep the same image for all Tabs)
  • Upload these files to a website or to your Image Manager
  • Add the hyperlink to the images into the code.

Steps:

1. Download Tab Image Template Twice

  • One for the Selected Tab
  • Another for the Unselected Tabs

Note: If you want all images to be the same, just use ONE image for Selected and Unselected Tabs

2. Edit the Tab Image Template to reflect your own color schemes

Note: Keep template size to 3px X 40px

3. Upload these files to a website or to your Image Manager

4. Edit the code in the <style> tags to reflect tab images:

  •  li.ui-tabs-active a: Selected Tab
  • .ui-tabs-anchor: Unselected Tabs

5. Paste this code at the top of the Plain-Text Editor, before the first line of code: <!-- jQuery -->.

<style>
li.ui-tabs-active a {background-image: url('Insert URL for SELECTED Tab Image'); } 
.ui-tabs-anchor {background-image: url('Insert URL for SELECTED Tab Image'); } 
</style>

tabbed box with images

 


Editing the Font Styles/Sizes/Colors in the Tabs

1. You will paste this code at the top of the Plain-Text Editor, before the first line of code: <!-- jQuery -->.

Code:

<style>
.tabfont {font-size: 22px; font-family: "Avant Garde", sans-serif; color: blue;}
li.ui-tabs-active a {font-size: 22px; font-family: "Avant Garde", sans-serif; color: red!important; }
</style>

Where:

  • .tabfont represents all tabs
  • li.ui-tabs-active a represents the selected tab
    <optional: leave out if you don't want a selected tab font change>

2. Add the following ID to the <a href> tags:

<li><a href="#tabs-1" class="tabfont">First Tab</a></li>
<li><a href="#tabs-2" class="tabfont">Second Tab</a></li>
<li><a href="#tabs-3" class="tabfont">Third Tab</a></li>

tabbed box font


Linking to a Specific Tab

Each tab has it's own unique ID, so linking to a specific tab is easy! Let's say that on another website or LibGuide you'd like to link to the second tab in the tabbed box. Here's what you'll need to do to build that URL:

  • Copy the URL of the page where the tabbed box lives
  • Add the following to the end of the URL: #tabs-2 where #tabs-2 represents the second tab inside the tabbed box
  • Example: http://I'mALibGuidesURL.com/content.php?pid=XXXXX#tabs-2
  • Change the #tabs-2 to represent whatever tab you'd like to link to.


Adding LibGuides API to a Tabbed Box

When adding a LibGuides API to a tabbed box, add the following to your API call: &css=0. 
This removes the default CSS from the API.

Tabbed Box API


Putting More Than One Tabbed Box on a Guide Page

When adding more than one tabbed box to a guide page, it's necessary to modify the code a bit for both boxes to work.

Just using the default code both times is a bit like calling out "John" in a crowded room--if there are two "Johns," it's not clear which John should respond. :) It's the same way with the tabbed boxes code.

For your second tabbed box, alter the bits of code indicated below:

<style>
/* Default color for links inside the tabbed box */
.ui-widget-content a, .ui-widget-content a:hover, .ui-widget-content a:visited, .ui-widget-content a:active {
color: #2954d1 !important;
text-decoration: underline !important;
}

/* Default styling for selected tab titles */
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #212121 !important;
text-decoration: none !important;
cursor: text !important;
}

/* Default styling for unselected tab titles */
.ui-state-default a:hover, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #555555 !important;
text-decoration: none !important;
cursor: text !important;
}
</style>

<!-- jQuery -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#tabs-A" ).tabs();
});
</script>

<div id="tabs-A">
<ul>
<!--This section introduces the tabs and titles them-->
<li><a href="#tabs-A1">My First Tab</a></li>
<li><a href="#tabs-A2">My Second Tab</a></li>
<li><a href="#tabs-A3">My Third Tab</a></li>
</ul>

<!--This section creates the content within each tab-->
<div id="tabs-A1">
Insert content for first tab here.
</div>
<div id="tabs-A2">
Insert content for second tab here.
</div>
<div id="tabs-A3">
Insert content for third tab here.
</div>

</div>

Paperclip icon Attached Files

Answered by Talia RichardsBookmark and Share

Other Answers / Comments (42)

  1. Thank you for this guide — it was very helpful!
    by Laurel Eby on Oct 18, 2011.
  2. Is it possible to reuse links or other boxes within a tabbed box?
    by Suzanne Bailey on Apr 11, 2012.
  3. Suzanne: links - no, since you'd be adding this to a Rich Text box and reusing isn't possible in that box (unless you're reusing the *whole* box). As for reusing boxes within a tabbed box...if you use the API to pull a content box from your system, I don't see why that wouldn't work! More on the API Utility: http://help.springshare.com/content.php?pid=119184&sid=1026858
    by Anna Burke on Apr 11, 2012.
  4. is there any way to make a box that is already created into one of the tabs? I have three separate links boxes I would just like to tab together. Thanks!
    by Erin on Oct 01, 2012.
  5. Hi Erin,

    You could create a new page (Add/Edit Pages> Add/Reuse Pages)

    Then under Add New Box choose the Reuse Existing Box tab, choose the guide where the boxes live and then choose the boxes you want to reuse under the new tab.
    by Mark Andrea on Oct 01, 2012.
  6. Is there anyway to insert a YouTube Video into the tabbed boxes? Thanks, Ellen
    by Ellen Bennett on Jan 16, 2013.
  7. Tab Template? I don't see where to click to download it.
    by Katie on Feb 04, 2013.
  8. Hello everyone,

    This tabbed box code has been updated to reflect a more current and supported code base, jQuery instead of DOJO.

    We recommend that you update your code to reflect the new code instead of the old code.

    Best,
    Talia Richards
    Community Specialist & Trainer
    by Talia Richards on Mar 19, 2013.
  9. Two Questions:

    1. How do I bring back the color contrast for links within the boxes? (all text, including links are the same color grey)

    2. Can I control the height of the boxes and have scrolling like we used to be able to do with the old version?
    by Heather on Mar 28, 2013.
  10. How do you have more than one box with tabs on the same page? If I try, only one will work at a time.

    Using the old code, I could have more than one tabbed box on the same page at a time.

    I tried changing the tab number e.g. 1-3 in box one, 4-6 in box two. That did now work.
    by Rachael on Mar 28, 2013.
  11. I found that if I pasted the code into a Rich-Text box, it didn't display correctly.

    I had to paste it into a Widgets box.
    by Brad Dishan on Mar 28, 2013.
  12. Hi Brad,
    I'm glad that you found that this code also works in a Widget box!

    I noticed that when I pasted the code into the Plain Text Editor of a Rich Text Box that I had to refresh the page, then the tabbed box appeared the right way. If you get a chance, can you try it again and see if that fixes it?

    Thanks!
    Cindi
    by Cindi Trainor on Mar 28, 2013.
  13. Hi, Rachael!
    It is indeed possible to have another tabbed box--you have to edit the code a bit. We'll update the text of this FAQ to reflect that, and I'll email you the code. :)

    Thanks.
    -Cindi
    by Cindi Trainor on Mar 28, 2013.
  14. Hi Heather! Talia here! Let me answer your questions inline below: 1.How do I bring back the color contrast for links within the boxes? (all text, including links are the same color grey) Talia: Just to clarify, you want to change the color of links within the box right? Not the color of the text of the box title? If yes, you’ll want to add some CSS above the box code and then add a class to each link. Let me explains: 1. Add the following at the top of the Plain Text Editor, above the jQuery code entering in your own hex values for the colors: <style>
    .boxlink a:link {color:#FF0000;} /* unvisited link */
    .boxlink a:visited {color:#00FF00;} /* visited link */
    .boxlink a:hover {color:#FF00FF;} /* mouse over link */
    .boxlink a:active {color:#0000FF;} /* selected link */
    </style> 2. Then add the following to each link. Look for the <a href=”http://www.somelink.com”> within the box text and add the following, class=”.boxlink”. So it should look like <a class="boxlink" href="http://www.google.com">My LINK</a> 2.Can I control the height of the boxes and have scrolling like we used to be able to do with the old version? TALIA: Yes you can! Just add the following to the <div id=”tabs”> line: <div id="tabs" style="height:50px; overflow: auto;">. Just change the 50px value to whatever works for you!
    by Talia Richards on Mar 28, 2013.
  15. Hi Trainers,

    My page is styled with rectangular boxes with sharp corners, not rounded. How do I change the JQuery code to have sharp rectangular tabs and content box?
    by Laura Kelsey on Apr 01, 2013.
  16. Hi Laura-
    The code we have is only for the rounded tabs, if you want a square tab you can use the image option and create square tabs. Hope this helps.
    Best,
    Michelle
    by Michelle Lustig on Apr 01, 2013.
  17. Is there any way of changing the color of the gray background behind the tabs (that gray bar the tabs are all lined up in front of)? It'd be nice if I could get that to match the box header, or in some instances (if the tabbed box colors matched the rest of the page) whiting out the box header and letting the tab titles function as the header.
    by Scott Kaihoi on Apr 01, 2013.
  18. Hi Scott - You can remove the background or change the color by pasting the following in the Plain Text Editor before the first line of code:

    <style>
    .ui-widget-header {background: url('')!important; }
    </style>

    if you want a different color then it would be:

    <style>
    .ui-widget-header {background: url('')!important; background-color: #000!important; }
    </style>

    You would replace #000 with whatever color you want to use.

    - Ken
    by Ken Liss on Apr 02, 2013.
  19. Hi guys,

    Is there any way to reduce the padding for the container on just one of the tabbed boxes? I'm trying to make the Worldcat Local tabbed widget fit and since that one doesn't seem to allow for adjustments, I thought I'd eliminate the padding on the left.

    Any suggestions would be greatly appreciated!

    Amanda
    by Amanda Collins on May 28, 2013.
  20. Hi Amanda-
    Unfortunately you can't tweak the code for just one box, it would have to be all of them. Have you tired using the smaller World Cat Widget? There is also a great guide from WSU with a bunch of tips http://libguides.wsulibs.wsu.edu/WorldCatSocial.

    Best,
    Michelle
    by Michelle Lustig on May 28, 2013.
  21. Hi Michelle,

    Yep, I've tried the smaller widgets. It's like there's some weird code built into the widget that forces a lot of padding on the left.

    I'll check out the WSU page though.

    Thanks!
    Amanda
    by Amanda Collins on Jun 06, 2013.
  22. Hi Amanda!
    I can take a look at it if you could send the URL of the box where the widget appears. It's worth a shot!
    by Valentina Mayz on Jun 06, 2013.
  23. Hi guys,

    I'm trying to change the link colour within boxes following Talia's instructions, but I can't get it to work! Either the link colours disappear entirely, or they're wrong. If I'm including the .boxlink code, do I also change the colours in the /* Default color for links inside the tabbed box */ part of the code, or do I omit that entirely? Neither way seems to be working and I can't figure out what I'm doing wrong.
    by Alana McDonald on Jun 11, 2013.
  24. Hi Alana!

    I'd be happy to help. Can you email us at support@springshare.com with the URL of your tabbed box so I can take a look at your CSS code?

    Best,
    Talia
    by Talia Richards on Jun 12, 2013.
  25. How do I create multiple columns under a tab? I want my content under the tab to be in 2 columns but whatever I am doing, it breaks the tab. Thanks.
    by Becky on Jul 22, 2013.
  26. Hi, Becky!

    It will depend on your content, but one thing you could consider is creating a one-row, two-column table in that tab.

    I hope this helps!
    by Laura Harris on Jul 22, 2013.
  27. I have spent 3 hours and still cant get it to work. Is there any more help to implement this?
    Thanks
    by J Miller on Aug 19, 2013.
  28. Hi, J -

    From what I can tell, it does not look like you are using one of our products (LibGuides, LibAnswers, LibCal, etc.). Is that right?

    If so, unfortunately, we can't offer much trouble-shooting advice, but I do have one suggestion for you.

    Our products have jQuery built-in, and jQuery is required to make this code work. If you're not implementing this code in one of our products, you might need to call jQuery in your web page in order for the code to work. That's pretty simple - just add this to your head code for the page:

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    I hope this helps!
    by Laura Harris on Aug 19, 2013.
  29. Hi! I am loving the tabbed boxes! Is it possible to put an RSS feed as the content of one of the tabs? I have seleted the RSS type box and added the tabbed formatting in the "add/edit text" area, and that has worked well much of the time, but I would like to neatly tuck the RSS feed into an tab (so that it is not showing at the bottom of all of the tabs!)
    Thanks!
    by Diane on Aug 26, 2013.
  30. Hi, Diane!
    You did everything right--the tabbed box code is meant to go into a Rich Text Box, or could go into the Rich Text area of other box types. For other box types, the tabs (and their content) will appear at the top; the other content appears below that Rich Text area.

    You could use a tool like FeedBurner's BuzzBoost to create html that pulls an RSS feed into a tabbed box. See Feedburner.com to get started! :)
    by Cindi Trainor on Aug 26, 2013.
  31. Thanks very much, Cindi! I actually decided to use RSSInclude.com, and that seems to be working well! Funny how just typing the question in the first place got me thinking along the same lines!
    Have a great day!
    by Diane Arnold on Aug 26, 2013.
  32. Ah, that's great, Diane! Glad to know you're all set. ;)
    by Cindi Trainor on Aug 26, 2013.
  33. Is it possible to create a list within a tab and/or embed an image within a tab?

    So instead of the information on the tab being in one paragraph you would have a bulleted list?
    by Christina on Feb 19, 2014.
  34. Hi Christina,
    Sure! But in this case it might be your safest bet to either mark up the content (the list, for example) directly in the PLAIN TEXT editor within the section of the code where the content for that specific tab section would go, or just copy and paste the code from your other source to paste into it.
    I think this might help if we discuss via email, so I'll send you a follow up that way.
    by Valentina Mayz on Feb 19, 2014.
  35. I would like to distinguish some of my tabs by having just a few of them in a different color. I succeeded in changing the color of the select tabs using inline styling, but, of course, they don't change color when they are selected (they stay the same color all of the time).

    Is there a way to do this (either with the default "selected tab" color or with being able to choose a different "selected tab" color for a few tabs)?
    by Sarah on Mar 20, 2014.
  36. Hi Sarah-
    The colors for tabs can only be one color for active and on color for inactive tabs. It is not possible to have multiple colors for tabs.
    by Michelle Lustig on Mar 20, 2014.
  37. Is it possible to have the active tab rotate at some set interval so that the content of each tab is displayed in rotation until one of the tabs is selected?
    by Connie Britton on Apr 02, 2014.
  38. Hi Connie,
    There isn't a way to make the tabs rotate, based on the above code.

    At this point, all of our coding efforts are focused on getting LibGuides v2 completed, and we're only working on the LibGuides v1 code in critical cases. But happily, we're very close to putting the finishing touches on LibGuides v2 - I can't tell you how excited we are to share it with everyone!

    You are welcome to come up with one some code to make the tabs rotate and we'll be happy to share it.
    by Zinthia Briceno on Apr 02, 2014.
  39. Hye, i've got a problem about the 4th tab. i followed all the steps but the content in the 4th tab wont appear. what do i have to do about this?
    by Dean on Jun 12, 2014.
  40. Hi, Dean,
    You need to make sure that the 4th tab has a unique ID. Without seeing your code, I can't really advise further. :) Please email support@springshare.com with a link to the guide in which you're using the code, and we'll be happy to take a look.
    Thanks!
    -Cindi
    by Cindi Blyberg on Jun 12, 2014.
  41. Is it possible to change the orientation of the tabs? Instead of up top horizontally, could they be on the left vertically?
    by Jasmine on Nov 10, 2015.
  42. Hi Jasmine,
    side navigation is something we added to LibGuides v2! Instead of tabs on the top, they are oriented on the left side of the page.

    To take advantage of this layout, and other great features, we suggest migrating to LibGuides v2. You can see more about how to get started on our migration guide: http://help.springshare.com/libguides/migration
    by Carrie, Springshare support on Nov 10, 2015.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.

Support:

Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
View All Topics

Related content from Springshare v1 Help