Vertical Tabs – A jQuery Plugin
June 29th, 2010
(Latest release, v1.1 on 02/09/2011)
VerticalTabs organizes images or blocks of markup into a simple, attractive, and easily styled tab layout. The markup only requires a div and two unordered lists so the plugin degrades gracefully when JavaScript is disabled. This extraordinarily lightweight plugin is ideal for maximizing the content’s impact on the user when screen real estate is at a minimum.
Markup
The markup requires two unordered lists wrapped in a div with a class of “verticalslider.” The first list is given a class of “verticalslider_tabs” and contains the text (or images) that appear on the tabs. The second list is given a class of “verticalslider_contents” and contains the contents that appear to the side of the tabs.
1: <div class="verticalslider" id="textExample">
2: <ul class="verticalslider_tabs">
3: <li><a href="#">Lorem Ipsum</a></li>
4: <li><a href="#">Praesent Pulvinar</a></li>
5: <li><a href="#">Nunc Adipiscing</a></li>
6: <li><a href="#">Praesent Dapibus</a></li>
7: </ul>
8: <ul class="verticalslider_contents">
9: <li>
10: <h2>Lorem Ipsum</h2>
11: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum.</p></li>
12: <li>
13: <h2>Praesent Pulvinar</h2>
14: <p>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.</p></li>
15: <li>
16: <h2>Nunc Adipiscing</h2>
17: <p>Nunc adipiscing purus id orci rutrum placerat.</p></li>
18: <li>
19: <h2>Praesent Dapibus</h2>
20: <p>Praesent dapibus metus vitae velit blandit tempor.</p></li>
21: </ul>
22: </div> Includes
To use VerticalTabs you must of course include jQuery, as well as including the single VerticalTabs JavaScript file and the single VerticalTabs css file.
1: <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2: <script type="text/javascript" src="verticaltabs/js/verticaltabs1.0.pack.js"></script> <!--http://dean.edwards.name/packer/-->
3: <link rel="stylesheet" href="verticaltabs/css/verticaltabs.css" /> Initializing
Simply initialize the plugin as you would any other jQuery plugin.
1: $("#textExample").verticaltabs(); Options
There are only a handful of options available for VerticalTabs detailed below:
- speed – the speed in ms it takes for one content item to fade out and the other fade in
- slideShow – boolean parameter which determines whether or not the contents automatically rotate
- slideShowSpeed – when in slideShowmode, this determines how long VerticalTabs pauses before switching contents
- activeIndex – specifies which tab and its corresponding contents displayed on load
- playPausePos – determines the position of the play/pause button when in slideShow mode (topRight, bottomRight, topLeft, bottomLeft).
- pauseOnHover – true or false option which determines whether the slide show will temporarily pause when the user mouses over the tabs or contents
Additionally, the tabs can float to the right of the content instead of the left by uncommenting the appropriate section in the vertical tabs stylesheet.
*VerticalTabs is inspired by Journal Interactive’s Community Site Content Slider.