How Can I Make 2 Vertical Tabs ( Left And Right ) Work On The Same Content Box In The Center>

I have some vertical tabs and i want to add more, but i want to add the to the right of the first vertical tabs. First ones are on the left and next to them there is the content bo

Solution 1:

I came up with a simple solution:

html:

<ulclass="verticalslider_tabs right"><li><ahref="#">Catedra de Limba si Literatura Romana</a></li><li><ahref="#">Catedra de Matematica</a></li><li><ahref="#">Catedra de Informatica</a></li><li><ahref="#">Limba engleza</a></li><li><ahref="#">Limba Germana</a></li></ul><ulclass="verticalslider_tabs"><li><ahref="#">Catedra de Limba si Literatura Romana</a></li><li><ahref="#">Catedra de Matematica</a></li><li><ahref="#">Catedra de Informatica</a></li><li><ahref="#">Limba engleza</a></li><li><ahref="#">Limba Germana</a></li></ul>

CSS:

.verticalslider_tabs {
        float: left;
        width: 220px;
    }
    .verticalslider_tabs.right {
        float:right;
    }
    .verticalslider_contents {
        display: block;
        margin: 0px;
        padding: 0px;
        overflow:hidden;
    }

demo: http://jsfiddle.net/pavloschris/26zQS/19/

Of course it still needs some changes to be normaly functional.

If you're willing to change the source code of the vertical tabs you just have to change one line to make it work.

change : activeIndex = $(this).parent().prevAll().length;

with : activeIndex = tabs.index($(this).parent());