Tabs

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Beginner

Tabs can be a great way to present a lot of related content in a small amount of space. Keep in mind that you'll want to avoid overloading tabs with too much information. If you find that happening, perhaps break the information out into separate pages. Or if you find yourself having to add too many tabs, you may also want to consider a different way of displaying your content.

With the aforementioned considerations in mind, you can create tabs by following these steps:

  1. Create an Unordered List or <ul> and add the wdn_tabs class to it, <ul class="wdn_tabs">
  2. Your List Items will be display as your tabs, so put whatever text you want seen in your tabs in an <li>.
  3. Add an a href tag, <a href=""> to the <li> text you just created.
  4. Add an ID selector <a href="#tabname"> in the a href.
    You should now have an li that looks similar to this: <li><a href="#tabname">Tab #1</a></li>.
  5. Repeat this process until you've created all your List Items (tabs). Close your list, </ul>.
  6. Now you will add a <div> tag with a class wdn_tabs_content or <div class="wdn_tabs_content">. The content for your tab is placed here which can be nearly anything; text, photos or even videos. You can connect the List Items you just created to their corresponding <div class="wdn_tabs_content"> by following the next few steps.
  7. Nested in the wdn_tabs_content div add a new div with the ID selector that matches the corresponding a href, <div id="tabname">. The ID connects to the a href in the List Item you made allowing the tabs to link and display the corresponding ID content.
  8. Add your content nested in that div.
  9. Make sure to close all your divs! Your first Tab should now be complete.
  10. Add more <div class="wdn_tabs_content"> until you've created all your tabs, used their corresponding IDs, and filled them with content.
  11. Save your page and regale your new tabbed content in all its glory!

Example

Tab 1

Content for Tab 1. ABOUT UNL

Tab 2

Content for Tab 2

Tab 3

Content for Tab 3 (see sub-tabs above.)

Tab 4

About UNL

The University of Nebraska–Lincoln, chartered in 1869, is an educational institution of international stature. A member of the Association of American Universities since 1909, Nebraska is recognized by the Carnegie Foundation as a Doctoral/Research Extensive university. UNL is a land-grant university and a member of the National Association of State Universities and Land-Grant Colleges (NASULGC). The university is accredited by the Higher Learning Commission of the North Central Association of Colleges and Schools. UNL will celebrate the 140th anniversary of its founding on Feb. 15, 2009.

A STRONG FOUNDATION

UNL’s endowment has reached over $1 billion, making it the seventeenth largest public university endowment in the nation and close to the top 50 of all institutions of higher education. The financial strength of the endowment has enabled the University to not only maintain but also to enhance its competitive position and develop its research and teaching missions in new and exciting ways. Technology will be a key enabler in creating a culture of instructional and research excellence at UNL.

Here's how you do it Source code


<ul class="wdn_tabs">
 <li><a href="#tab1">Tab #1</a></li>
 <li><a href="#tab2">Tab #2</a></li>
 <li><a href="#tab3">Tab #3</a></li>
 <li><a href="#tab4">Tab #4: Multiple Column layout</a></li>
 </ul>
 <div class="wdn_tabs_content">
 <div id="tab1">
 <h4>Tab 1</h4>
 <p>Content for Tab 1. <a href="http://www.unl.edu/ucomm/aboutunl/">ABOUT UNL</a></p>
 </div>
 <div id="tab2">
 <h4>Tab 2</h4>
 <p>Content for Tab 2</p>
 </div>
 <div id="tab3">
 <h4>Tab 3</h4>
 <p>Content for Tab 3 (see sub-tabs above.)</p>
 </div>
 <div id="tab4">
 <h4>Tab 4</h4>
 <div class="wdn-grid-set-halves">
 <div class="wdn-col">
 <h3>Being Here</h3>
 <ul>
 <li><a href="http://www.unl.edu/ucomm/aboutunl/">ABOUT UNL</a></li>
 <li><a href="http://visit.unl.edu/">UNL VISITORS PAGE</a></li>
 <li><a class="external" href="http://www.lincoln.org/">VISITORS GUIDE TO LINCOLN</a></li>
 </ul>
 </div>
 <div class="wdn-col">
 <h4>About UNL</h4>
 <p>The University of Nebraska–Lincoln, chartered in 1869, is an educational institution of international stature. A member of the Association of American Universities since 1909, Nebraska is recognized by the Carnegie Foundation as a Doctoral/Research Extensive university. UNL is a land-grant university and a member of the National Association of State Universities and Land-Grant Colleges (NASULGC). The university is accredited by the Higher Learning Commission of the North Central Association of Colleges and Schools. UNL will celebrate the 140th anniversary of its founding on Feb. 15, 2009.</p>
 <h5>A STRONG FOUNDATION</h5>
 <p>UNL’s endowment has reached over $1 billion, making it the seventeenth largest public university endowment in the nation and close to the top 50 of all institutions of higher education. The financial strength of the endowment has enabled the University to not only maintain but also to enhance its competitive position and develop its research and teaching missions in new and exciting ways. Technology will be a key enabler in creating a culture of instructional and research excellence at UNL.</p>
            </div>
          </div>
        </div>
     </div>
   

Accessibility Considerations: 

To be added.

Usability Considerations: 

  • Avoid too many tabs.
Contributed By: 
IIM

Comments

bsrinidhi2's photo

Missing in the documentation: Initialization of tabs script for wdn-tabs plugin.


WDN.initializePlugin('tabs');