How to add Tabs

This tutorial will show you how to add tabs to your page.

Tabs can be useful if you have a lot of information about a few subjects that you want to present. Keep in mind the horizontal layout of the tabs, every time you add a new tab it makes the tab navigation wider, and the page has a limited width. If you have a large number of topics you may find that the collapsible panels or easy panels are better suited to your needs.

Below is a functional example of the tabs, clicking on Tab One, Tab Two, and Tab Three displays different content.

Tab One

Sample Tab One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis dictum libero, vitae tempor nisi tempor sit amet. Nam auctor mauris sit amet nisi commodo facilisis. Donec rutrum et nisi varius dapibus. Aenean aliquam rhoncus turpis, eget tristique justo rhoncus vel. Nunc metus elit, rhoncus sed elit vel, aliquet vestibulum nisi. In hac habitasse platea dictumst. Nullam ornare, ex at interdum convallis, odio ligula pellentesque nibh, in facilisis tellus lacus in magna.

Tab Two

Sample Tab Two

Pellentesque fringilla pellentesque dapibus. Praesent porttitor ac lectus nec fermentum. Suspendisse rhoncus enim ipsum, eget suscipit nibh rhoncus non. Vivamus blandit volutpat imperdiet. Quisque pharetra cursus mi, quis fringilla diam eleifend nec. Phasellus vitae massa ultrices, molestie velit in, hendrerit quam. Vivamus vitae lacus nec magna lobortis aliquam eget et tellus. Morbi eros orci, porttitor at ultricies vel, rhoncus non odio. Vivamus a leo feugiat, sodales ligula non, iaculis purus. Curabitur nec erat sed odio tempor gravida. Vestibulum id metus nibh. Sed fringilla tempor ante pellentesque scelerisque.

Nulla aliquam condimentum elit, non maximus nibh consequat eget.
Fusce pharetra dolor sed augue vehicula, id tristique nisi pretium.
Mauris consectetur viverra malesuada.

Tab Three

Sample Tab Three

Integer quis viverra nisi. Donec et molestie massa. Aliquam nisl erat, sollicitudin sed erat quis, suscipit gravida libero. Pellentesque purus ex, convallis et sem sit amet, cursus pulvinar quam. Donec non vestibulum metus. Integer a metus congue, luctus odio sed, vehicula sapien. Phasellus sodales malesuada dictum. Donec non ligula a sapien dignissim sodales id et turpis.

Quisque tellus tellus, vehicula ut posuere quis, malesuada accumsan quam. Etiam nec rutrum velit, sed lacinia massa. Donec non metus interdum velit cursus tempor nec at nisl. Suspendisse porta tincidunt viverra. Curabitur aliquet eleifend urna, ut faucibus augue pretium et. Mauris consequat nisl laoreet egestas pellentesque. Sed eleifend dolor id porttitor consectetur.

IMPORTANT: Organizational Note

All of the materials that you want to be contained in a set of tabs needs to be contained in a single web part zone. Also, only those materials can be in that web part zone. You couldn't have for example a block of text in a content editor and a set of tabs inside of the same web part zone. The script that creates the tabs turns each web part in that zone into a tab, so your content editor with text would also be turned into a tab.

If none of the existing page layouts will work for you, for example if you needed more web part zones to accommodate the tab code, contact Web and Media Services for assistance.

Steps to Add Tabs

Put your page into editing mode and determine which web part zone to which you want to add your tabs. This web part zone shouldn't contain anything else.
Add the tab script
Click on Add a Web Part in the zone where you are adding your tabs. In the web part menu select the category on the left UWSP Web Parts, and on the right select Web Part Tabs Javascript and click Add.

This web part contains the script that creates the tabs and makes them functional. This web part should always be the last one in your zone with the tabs.
Add the tabs
Determine how many tabs you're going to need. For each tab add to your web part zone a Web Part Tabs Sample Tab web part. So, If you want three tabs you'll add three of the Sample Tab web parts. The Sample Tab web part is located under UWSP Web Parts next to the Web Part Tabs Javascript you added earlier.
Customize your tabs
The name of your tab, the text that appears on the tab itself, is changed via the "Edit web part" menu. To get to the Edit web part menu move your mouse pointer over the top bar of the web part, you'll see a little triangle appear on the right side of the bar. Click on it and a little fly-out menu appears, select "Edit web part" from the options. The name of the tab is the Title field in the Appearance section.

The body of the tab functions just like a content editor web part. Delete the sample content and add your own.