Skip to Main Content

LibGuide Tricks: Tabbed Box

Tips to use in LibGuides 1 - DO NOT USE IN LIBGUIDES version 2.

LIBGUIDES 1

PLEASE NOTE THAT THIS INFORMATION IS FOR LIBGUIDES 1 ONLY - DO NOT ATTEMPT IN LIBGUIDES 2.0.

Tabbed Box

Place more items on a page with tabbed boxes.

Example code used here:

<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>

<div style="width: 250px; height: 300px">
<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">

<div dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
Put content here for the first tab
</div>

<div dojoType="dijit.layout.ContentPane" title="Tab 2">
Put content here for the 2nd Tab
</div>

<div dojoType="dijit.layout.ContentPane" title="Tab 3">
Put content here for the 3rd Tab
 </div><div dojoType="dijit.layout.ContentPane" title="Tab 4">
Put content here for the 4th Tab
 </div><div dojoType="dijit.layout.ContentPane" title="Tab 5">
Put content here for the last Tab
 </div>
 
</div>
</div>

Instructions

  • Create a Rich-Text box.
  • Copy the example code and paste into the Plain-Text Editor.
  • Add your information for each tab and add content in each box.
  • Change the width and height to match the box you created.

Example Tabbed Box

Put content here for the first tab
Put content here for the 2nd Tab
Put content here for the 3rd Tab
Put content here for the 4th Tab
Put content here for the last Tab