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.


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> 


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> <!--> 
3: <link rel="stylesheet" href="verticaltabs/css/verticaltabs.css" /> 


Simply initialize the plugin as you would any other jQuery plugin.

1: $("#textExample").verticaltabs(); 


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).
  • pauseOnHovertrue 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.

View the Demo

Download Demo

101 Responses to “Vertical Tabs – A jQuery Plugin”

  • donal says:

    August 12, 2010 @ 9:31 am

    Looks really nice. How flexible is the UI of the tabs themselves?

    • admin says:

      August 12, 2010 @ 11:47 am

      Not as flexible as I’d like, but fairly versatile.

  • Kyle says:

    August 31, 2010 @ 1:14 pm


    I was wondering how I would get the slider to pause when my mouse is hovering over the content or image section.

    Thank you,

  • admin says:

    September 6, 2010 @ 11:12 am

    I am working on two updates for the plugin right now – pause on hover and an option to float the tabs to the right of the content.

  • Jeremy says:

    October 14, 2010 @ 3:02 pm

    I would really love to see this work with right aligned menu.

    • admin says:

      October 14, 2010 @ 4:53 pm

      You can achieve this simply by opening the CSS file and un-commenting the styles in the /* Float Right Styles */ section. If you need both left and right on one page, you’ll have to create a new class name to do so.

  • John S. says:

    October 18, 2010 @ 6:45 pm

    Beautiful AND simple to implement! Hooray!

    I was wondering if there was any option to change the transition effect… maybe from Fade to a Slide or one of the other jQuery transition effects?

  • admin says:

    October 19, 2010 @ 3:03 pm

    Thanks for the compliments! Right now fade is the only transition effect. I’d like to implement a slide transition at some point, but I can’t promise when that will happen.

    • John S. says:

      October 19, 2010 @ 6:35 pm

      Cool. Thanks for the quick response… and the really cool plugin! 😀

  • Bill Y. says:

    October 28, 2010 @ 4:44 am

    That’s cool! Thank You…

    Problem: I use transparent PNG files, it will be black when its fade.

  • Gordon says:

    October 30, 2010 @ 6:34 am

    Hi there, this is great… wondering if i can remove the transition all together. i.e user needs to click on the tab to change the content?

    sorry very new to jquery…. in fact computers in general 😛


    • admin says:

      November 1, 2010 @ 11:32 am

      To remove the automatic transitions so that a user needs to click a tab to change the content, set the “slideShow” option to false.

      $(“#yourContentId”).verticaltabs({slideShow: false});

      To make the transitions happen instantaneously (without the fade effect), set the “speed” option to 0.

      $(“#yourContentId”).verticaltabs({slideShow: false, speed: 0});

  • Jon says:

    December 4, 2010 @ 2:54 pm

    For some reason, when I have the pause over hover parameter set, the slideshow permanently pauses instead of temporarily. Whether or not it’s normal, is there a way to just get it to pause while the mouse is over the tabs/content, without pausing fully?

    • Jon says:

      December 4, 2010 @ 3:06 pm

      Nevermind. Could be a bug or something. This was only happening when I set the play/pause button to “display: none” in the CSS. However this isn’t a problem with “visibility: hidden”.

  • Rich Morgan says:

    December 14, 2010 @ 1:00 pm

    Great looking vertical tabs.. One question.. I would like to use a checkbox just to the left of the tab text, but because of the jQuery functionality I’m losing the ability to check and uncheck the associated checkbox. Any ideas on how I can get around that?.. Thanks!


  • Artur says:

    December 15, 2010 @ 9:44 am

    Very nice tabs, does it have an ability to colapse?

  • kamal says:

    January 23, 2011 @ 5:59 am

    exactly what I’m looking for.. thanks so much for this great plugin.. I can see that ie6 is not supported but is ie7 supported?

    • admin says:

      January 23, 2011 @ 8:31 am

      That’s correct, I no longer support IE6 in my projects.

  • Pieter Le Roux says:

    January 26, 2011 @ 3:09 pm

    How would I trigger an event when a specific tab loads? For example, I want an ajax event to fire when I click on tab #3. Is there anything that can give me the ability to fire such an event when entering a specific tab?

    • admin says:

      January 26, 2011 @ 10:35 pm

      There is nothing currently in the code for something like this, though you could modify the plugin JavaScript to do this. Look through the code to find the // Event Bindings comment, and edit the $(“.verticalslider_tabs a”, verticaltabs).click(function () function.

  • AM says:

    February 2, 2011 @ 9:03 am

    There is a bug in your plugin. The activeContent style isn’t removed when switching tabs. In the switchContents function there is a .removeClass(“.activeContent”); The leading period on the class name on the call to removeClass is wrong.

    • admin says:

      February 3, 2011 @ 8:51 am

      Thank you for catching that. That is indeed a bug and has now been corrected in the demo.

  • SFernanfo says:

    February 2, 2011 @ 9:50 pm

    Great work!
    Works great on asp .net. I want to keep a track of the “activeIndex” when page refresh and panel updates, how can I do this? Any Idea?

  • admin says:

    February 3, 2011 @ 8:55 am

    When the panels switch, the active panel gets a class of “activeContent” and the active tab gets a class of “activeTab”. You can use these class names to find the active index.

    • SFernando says:

      February 3, 2011 @ 8:03 pm

      Thanks Kent, I’ll try this.

  • Oliver says:

    February 4, 2011 @ 6:35 pm

    I like it very much
    Can I use regular JQuery tabs inside the content of this vertical tab?.

  • admin says:

    February 4, 2011 @ 7:46 pm

    In theory, you can use any valid HTML inside of the content, though the more you add the more you have to mind style details and possible JavaScript event conflicts.

  • Anthony says:

    February 9, 2011 @ 9:32 pm

    First off, thanks for this great tool – I looked all around for a jquery vertical tab script and finally found yours. Second, glad to see that you’re actively developing this. Third, I do have one issue: when I have content which takes more space than the box, it overflows. Is there a way I can make the box automatically expand to hold the bigger content? Here’s a demo of what I’m talking about – note that the text in the first tab overflows the box:

  • admin says:

    February 9, 2011 @ 10:55 pm

    Sorry, the plugin was developed to specifically not grow with extra content, though the way it handles that now is buggy. I am first going to address the current overflow issue, and then look into adding an option to allow for expandable content.

  • Matty says:

    March 7, 2011 @ 12:41 pm

    Like your plugin a lot good work , however cant have more content on the page, is the fix going to be soon or few months?


  • Maril says:

    March 10, 2011 @ 7:17 pm

    In IE8 the text gets blurry/fuzzy during the fade. Adding a background color to the text fixes it for FF and IE7 but IE8 is still blurry during fade…any fix for IE8?

    • admin says:

      March 14, 2011 @ 8:02 am

      Indeed, IE (most versions) does not render text too well during jQuery animations, particularly the fade effect. I do not know of a fix for this, but this blur should only affect the aesthetics, not the functionality of the page, and even so, only slightly.

  • Gabriele says:

    March 29, 2011 @ 6:12 am

    Is it possible to get the slideshow starting again on mouseout?

  • Frans says:

    March 29, 2011 @ 8:08 am

    Images aren’t being displayed correctly in IE7. They move to the right next to the right border. Is there an IE7 fix available?

  • Andrew says:

    April 11, 2011 @ 2:24 pm

    Thanks Kent,

    This vertical tabs script is great and I have been very pleased with the functionality and simplicity of the code. I am however running into one issue. I have positioned the .arrow class directly on top of the tabs. I have altered the z-index and position attributres, but for some reason I cannot get the arrow to appear on top of the tabs in firefox or IE. Everything is working perfectly in Safari and Chrome, but for some reason I cannot specify a background image that displays on top in FF. I have treid to work around this by setting a background image on “.verticalslider_tabs .activeTab a:active” However, I haven’t been able to get this solution working either. Do you know of any limitations with stacked CSS class selectors and background images? Or can you think of an alternative solution?

    Thanks again,

  • Raistlin says:

    April 28, 2011 @ 7:49 am

    Nice post!
    Instead of using unordered lists to display content, have you tried to use jQuery Address ( to display external content and for deep linking?

  • Silviu says:

    May 3, 2011 @ 1:11 am

    This is a cool plugin. In order to format my lists, I had to insert them in separate divs. But now the script doesn’t work. Html code looks like:

    Tab 1
    Tab 2

    Content 1
    Content 2

    This is a cool plugin. In order to format my lists, I had to insert them in separate divs. But now the script doesn’t work. Html code looks like: Can you please show me how to modify js files to make it work?

  • Silviu says:

    May 3, 2011 @ 1:27 am

    Sorry about the previous comment. Html code looks like this:

    <div class=”verticalslider”>
    <div class=”verticalslider_left”>
    <ul class=”verticalslider_tabs”>
    <li><a href=”#”>Tab 1</a></li><br />
    <li><a href=”#”>Tab 2</a></li>
    <div class=”verticalslider_right”>
    <ul class=”verticalslider_contents”>
    <li>Content 1</li><br />
    <li>Content 2</li>

    • Victor says:

      August 23, 2011 @ 6:46 am

      Change line number 47:
      var tabs = $(verticaltabs).children(“ul.verticalslider_tabs”).children(); // all of the tabs
      var tabs = $(verticaltabs).find(“ul.verticalslider_tabs”).children(); // all of the tabs

  • Paul says:

    May 31, 2011 @ 9:12 am


    Is there an easy way to activate a specific tab via JQuery Javascript?

    • Paul says:

      May 31, 2011 @ 9:18 am

      Strike the above I can set it using activeIndex thanks!

      • admin says:

        May 31, 2011 @ 2:38 pm

        Yes, that’s exactly it.

  • Shaun says:

    June 18, 2011 @ 5:15 pm


    Great work. I love it.
    I was wondering if you had a solution to select a tab from a url link.


    • admin says:

      June 21, 2011 @ 2:51 pm

      No, I currently do not have a way to do this.

  • Rahul says:

    June 20, 2011 @ 4:15 am

    How to disable few tabs on load ? So few tabs will look like transparent tabs.

  • Slade says:

    June 24, 2011 @ 9:36 am

    This is a good vertical tab set up, however im having cross browser nightmares with it. In order to fix the IE7 positioning problem, i have effectively broke it in chrome and safari. If there was just an IE7 fix for the content being pushed off to the right, it would be perfect, but im either going to have to ditch the autopage feature or the tabs entirely.

  • Shawn says:

    June 30, 2011 @ 4:02 pm

    Hey great plugin! Quick question: Is there a way to pass which tab displays through a URL?

    For instance, if I were using this to display a list of sub pages. I could have everything display in the parent page, and then say something like

  • Shawn says:

    June 30, 2011 @ 6:24 pm

    I actually just answered my own question. Maybe this will help others.

    In PHP you can assign a variable and pass it to the script to assign the Active Tab. Here is the header coding:

    $(“#textExample”).verticaltabs({speed: 500,slideShow: false,activeIndex: });
    $(“#imageExample”).verticaltabs({speed: 1000,slideShow: true,slideShowSpeed: 3000,activeIndex: 0,playPausePos: “topRight”});

    Next, pass the active tab variable through PHP:

    The number ‘2’ will then become the active tab….in your script this would be the 3 menu item.

    If this variable is not sent through the URL, PHP will assign the default as ‘0’.

    Again, hope this helps someone else…

    I see ‘Shaun’ actually asked the same question in a previous comment.

  • rvt says:

    August 5, 2011 @ 3:43 pm

    HEre is a binder for the tabs that allows a link to be placed over the tab.
    if the link was not ‘#’ then it will jump to a URL. Hope that makes sense….

    // Event Bindings
    $(“.verticalslider_tabs a”, verticaltabs).click(function (foo){
    if (!$(this).parent().hasClass(“activeTab”)){ // do nothing if the clicked tab is already the active tab
    if (foo.currentTarget.href.charAt(foo.currentTarget.href.length-1)==’#’) {
    activeIndex = $(this).parent().prevAll().length; // a clicked -> li -> previous siblings
    if (slideShow){
    slideShow = false;
    $(“.pause a”, verticaltabs).css(“display”,”none”); // pause slideshow if currently in slideshow mode
    $(“.play a”, verticaltabs).css(“display”,”block”); // pause slideshow if currently in slideshow mode
    } else {
    return true;
    return false;

  • Noslen says:

    August 8, 2011 @ 3:24 pm

    How do you control the dimensions of the .activeContent class? It is nowhere to be found in the style sheet. Perhaps just I don’t understand how it is effected in relation to the other elements. Any help? Thanks!

    • Brandon says:

      September 17, 2011 @ 7:49 am

      This is how it looks on mine.
      .verticalslider_contents .activeContent {
      display: inline;
      height: 300px;

      • Hugh Bellamy says:

        November 12, 2011 @ 2:10 am

        Hello, That doesn’t seem to work! Please help, as It cuts of all my other content.

  • watermelonkid says:

    August 10, 2011 @ 1:19 am

    If I use any named anchors in the content itself, it breaks the whole plugin. Is there a workaround to being able to use named anchors in the content?

  • watermelonkid says:

    August 10, 2011 @ 1:26 am

    Disregard–conflict with another plugin!

  • Davide says:

    August 10, 2011 @ 4:42 am

    Hi Kent, first of all thanks for your awesome piece of code. I like it very much. Currently I’m experiencing a little trouble with verticalTabs that I try to explain (sorry for my poor english).

    I’ve set the slideShow parameter as true and now works perfectly until the webpage is displayed, but when i get off the focus from the browser (or browser tab) and, after a few seconds, reset the focus on the browser (or browser tab) that display the page with verticalTabs seems that the content changes very fastly, almost to gain the lost time. I’ve experienced that in the demo this problem doesn’t appear, so if you could help me it will be great.
    Thanks in advance.

  • Paul says:

    August 29, 2011 @ 12:21 pm

    anyone know how I could link directly to a specific tab using
    in WordPress with pretty permalinks?

  • Mark says:

    September 8, 2011 @ 6:37 pm

    Curious – is there an easy way to adjust the script so that the “contents” don’t load until that tab is active?

  • Sergio says:

    September 14, 2011 @ 8:51 pm

    Hi, how can i rezise the verticalslider window?

    thank in advance


  • rvt says:

    September 16, 2011 @ 12:09 pm


    this is my solution to it :
    In switch contents do this:

    $(“.activeContent”, verticaltabs).stop(true, true).fadeOut(options.speed).removeClass(“activeContent”);
    $(contents[activeIndex], verticaltabs).stop(true, true).fadeIn(options.speed).addClass(“activeContent”); // Update content

    The queuing is still there, but when you switch back to the tab it will run them extremely fast. When I find a better solution, I will post…

  • rvt says:

    September 16, 2011 @ 12:21 pm

    THis version might work even better:

    // Plugin Methods
    function switchContents() {
    $(“.activeContent”, verticaltabs).clearQueue();
    $(contents[activeIndex], verticaltabs).clearQueue();
    $(“.activeTab”, verticaltabs).removeClass(“activeTab”);
    $(‘.arrow’, verticaltabs).remove();
    $(tabs[activeIndex], verticaltabs).addClass(“activeTab”).append(arrowBlock); // Update tabs
    $(“.activeContent”, verticaltabs).stop(true, true).fadeOut(options.speed).removeClass(“activeContent”);
    $(contents[activeIndex], verticaltabs).stop(true, true).fadeIn(options.speed).addClass(“activeContent”); // Update content

  • Souj says:

    October 25, 2011 @ 2:46 pm

    This is an excellent example for creating simple vertical menu using Jquery. but i have one problem when i tried to use the code above. it messes up the menu in my page if i dont use element and if i use then it is messing up my existing contents of the page. does anyone has an answer?

  • Souj says:

    October 25, 2011 @ 2:48 pm

    This is an excellent example for creating simple vertical menu using Jquery. but i have one problem when i tried to use the code above. it messes up the menu in my page if i dont use DOCTYPE element and if i use DOCTYPE then it is messing up my existing contents of the page. does anyone has an answer?

  • Roman says:

    October 26, 2011 @ 7:47 am

    Wonderful and elegant code!! Great job. I do have one question. Per your Feb. remark, you mentioned a container auto-size might be added at a later point. Do you still have plans to do that?


  • Tim says:

    October 26, 2011 @ 10:00 am

    Is there a way to remember the selected tab with a cookie so that it re-selects it if I hit the back button?

  • littlechad says:

    October 31, 2011 @ 3:58 am

    hi there, this is a great plugin. Thank you! 😀

    i would like to ask one question though, how can i get this to work inside a jquery UI tab ‘content via ajax’ ?? thanks

  • ismar says:

    November 1, 2011 @ 6:25 am

    What would I need to modify / add/ remove in the styles file to have the control take all of the avalibale page space?

  • ADG says:

    December 31, 2011 @ 1:24 pm

    When I open up the CSS for right float I lose the arrows. Any hint?

  • ADG says:

    December 31, 2011 @ 1:31 pm

    Ignore previous – It was the path. It’s set to “../images” rather than absolute. For those running this OOTB and doing this make sure to change that.

  • Alex Kuznetsof says:

    January 3, 2012 @ 12:24 am

    Thank you buddy !!!

  • Web Design Burgess Hill says:

    February 2, 2012 @ 6:13 am

    Used this on one of my websites, found it much easier to work with compared to the jQuery UI version!


  • Jade says:

    February 9, 2012 @ 1:22 am

    Very simple to implement, thank you.

    I was just wondering, is there a way to access a tab directly via a URL? (not land on the default active tab)

  • Jade says:

    February 9, 2012 @ 1:30 am

    Just found page 1 of the comments where this has been covered. Will give Shawn’s advice a go. Cheers

    • Christine says:

      March 26, 2012 @ 3:36 pm

      Jade, how did you get to the other pages of comments?

  • Prodyot says:

    February 28, 2012 @ 10:15 pm

    It has solved one of my nagging issues.
    Thanks for sharing.

  • Ramiya says:

    March 5, 2012 @ 11:30 pm

    Thank you so much for sharing it. One doubt, how to set ‘auto’ height in css for the contents.

    • Ramiya says:

      March 5, 2012 @ 11:31 pm

      increse the height..

  • Aashis Khanal says:

    March 7, 2012 @ 10:00 am

    hi ..
    my content are text contents are like 3-4 paragraphs .. it doesn’ fit in above demo .. I couldn’t able to scroll as well.
    Is there anyway we can increase the height of the right text container.
    I mean the auto height depending on the contents each tab container holds.

  • Niels says:

    March 23, 2012 @ 4:09 am

    Hi, I really like your plugin, but with IE7 the content is placed to the far right of the screen. Is this a known issue?

    • gil says:

      April 17, 2012 @ 8:20 am

      Try adding margin: 0 0 0 0; padding: 0; position:relative; to .verticalslider_contents . Somehow adding extra 0’s helped me… But yes I had the same issue.

  • Christine says:

    March 26, 2012 @ 3:34 pm

    Great plugin! I was wondering if there is a way to activate the change on hover, instead on on click of the tabs?


  • Crazy Soccer says:

    April 24, 2012 @ 2:56 am

    It’s Very simple to implement, thank you for sharing with us.

  • Glenn says:

    April 27, 2012 @ 4:16 am

    If you remove the follow code from verticaltabs.js it will stop assigning a height to the content area:

    $(“.verticalslider_contents li”,verticaltabs).css({height: totalHeight + “px”}); // Assign height to contents to prevent content overflow

  • Debashis Chowdhury says:

    April 27, 2012 @ 5:41 am

    Thanks for this awesome plugin. I wanted to open a tab while redirecting from other page, but failed to do so. Let me explain my requirement. By default, the first tab is open. On third tab content there is a link of other page. From this page if someone clicks on back button (manually implemented redirection option, not the browser’s back option), i wanted to open the 3rd tab open by default. Tried to put an Id on “” and passing this id using redirection url( But failed to do so. Any suggestion?

    Thanks in advance.

  • Glenn says:

    April 30, 2012 @ 10:37 am

    I am looking to style one of the active tabs differently from the rest. Change what the active state looks like on the top menu item


  • Zain says:

    May 28, 2012 @ 11:06 pm

    Thanks man

  • Riaan says:

    June 5, 2012 @ 3:39 pm

    Thanks for the great script! Just one issue I am having: for some reason the third tab is always the default tab to show. I have changed activeIndex value (was 0), and even removed it from the code, but still no change. Any ideas?

  • claudia Chang says:

    July 20, 2012 @ 9:39 am

    vertical tabs left menu not working in IE8

  • Steve Wheller says:

    July 30, 2012 @ 4:24 am


    Thanks for the great script. Is there any way to put a link on each tab when you first get to the page the script scrolls through the tabs and then when the customer clicks on a tab it takes them to a specific page.



  • lui says:

    August 29, 2012 @ 6:09 pm

    is it posible to make it display the height from “verticalslider_contents” depending on the height from the inner content?

  • David says:

    August 31, 2012 @ 6:33 am

    wanted to know if an image can be used on thee tab so that when its being clicked on that image drops down. if yes i need some help on that.

  • jamey says:

    September 8, 2012 @ 1:29 pm

    Not working in Safari…

    • jamey says:

      September 8, 2012 @ 3:15 pm

      got it working. thanks!

  • Val says:

    December 2, 2012 @ 8:36 am

    Hi this is a great little plugin and it works well.
    However, I noticed that no matter what I do in the CSS it is not allowing for an activeContent tab larger than 255px.

    Looking at the DOM Tree I noticed that the plug in is using inline CSS to all of the

    Seeing that inline CSS will overrule anything in the stylesheets, there anyway to remove the stlye=”height:255px” call to all the li?
    I can find no reference to this any any of the code and it seems to be coming from thin air

  • Steve says:

    February 11, 2013 @ 7:25 pm

    Thanks for the code! It has worked great, but I have started noticing that the height of the content has been messed up for IE. Has anyone found any solutions as to why IE is messed up, but it looks fine in Chrome and FireFox?

  • Jenile says:

    March 2, 2013 @ 1:54 pm

    Thank you so much for offering this. I’ve been scouring the web for something similar and you’re the first that’s given something easy to understand. I am, however, a total newbie, and I’m working in wordpress. I get that I put that html directly within the page that I want the slider to appear and I know how to add the CSS. Can you clarify though where the two script files should go? And also where do I put that small piece of code to “initialize” the plugin?

  • Micutzu says:

    March 4, 2013 @ 11:59 am

    i was wondering, can i double the menu ? i mean when i click on a button to open another series of buttons and only after clicking them to open a content box ? please help me ASAP. THX

  • David Brown says:

    March 13, 2013 @ 10:07 am


    Thanks for this slider, its what I’ve been looking for.

    One question however, why does the slider “flash” (or go white) before showing the next slider the first time it transitions, all subsequent transitions fade in/fade out nicely, but the first change is never smooth.

    Ideas ?

  • Earl Baugh says:

    November 13, 2013 @ 6:56 am

    I’m trying to add a within a tab. However the content of such lists doesn’t display. I can’t tell if this is because it’s already scanning a for the content, or if it’s style related. Thoughts?

  • Martin says:

    February 6, 2014 @ 5:52 pm

    Great script, but i was wondering how i could attach an hyperlink to the list-items in the verticalslider_tabs image UL.

    these options are not working:


    Is there a solution for this?

  • Web Site Migration- Resources compiled by Valerie Forrestal | ACRL/NY User Experience Discussion Group Blog says:

    May 5, 2015 @ 7:22 pm

    […] Vertical tabbed box (jQuery): […]

  • Varun says:

    January 27, 2016 @ 10:29 am

    Great plugin! Is there a way to fit more than 4 tabs within the same height, and add a scroll down function within the tabs?

Leave a Reply to Rich Morgan