Vertical Tabs with JQuery?

Question

I want tabs along the left side of the page instead of across the top. I'm already loading JQuery for other reasons (effects), so I prefer using JQuery to another UI framework. Searches on "vertical tabs jquery" yield links to works-in-progress.

Is getting Vertical Tabs to work across browsers fraught, or is it so trivial that, once you have a solution, it doesn't seem worthwhile to post example code?

Answer 1

I'm not sure this is what you are looking for, but, here it is anyways: http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

Answer 2

Use this. Whether the tabs are vertical or horizontal simply depends on how you style them with CSS.

Answer 3

I wouldn't expect vertical tabs to need different Javascript from horizontal tabs. The only thing that would be different is the CSS for presenting the tabs and content on the page. JS for tabs generally does no more than show/hide/maybe load content.

Answer 4

Try here:

http://www.sunsean.com/idTabs/

A look at the Freedom tab might have what you need.

Let me know if you find something you like. I worked on the exact same problem a few months ago and decided to implement myself. I like what I did, but it might have been nice to use a standard library.

Answer 5

Have a look at Listamatic. Tabs are semantically just a list of items styled in a particular way. You don't even necessarily need javascript to make vertical tabs work as the various examples at Listamatic show.

Answer 6

I had been done a menu vertical and tabs changing in the middle of the page

I changed two words on the code source and I set apart two different Div's

one it's the menu:

<div class="arrowgreen">
  <ul class="tabNavigation"> 
    <li a href="#first" title="Home">Home</a></li>
    <li a href="#secund" title="Home">Home</a></li>
  </ul>
</div> 

And the other div it's the content.

<div class="pages">
  <div id="first">
    CONTENT
  </div>
  <div id="secund">
    CONTENT
  </div>
</div>

the code works with the div apart

$(function () {
    var tabContainers = $('div.pages > div');

    $('div.arrowgreen ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.arrowgreen ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

I hope it helps.

Ricardo Lima

Answer 7

Have a look at http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html I try out it, it worked fine.

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style> 

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    });
</script>