Multiple tabs same content

Question

There are 6 divs on the page:

A B C D E F G

I want to reuse those divs to display content based on the tab.

For example:

Tab1 = A B

Tab2 = A C

Tab3 = A B C

and so on...

What would be the best way to do it( jQuery? ) Any examples?

Answer 1

TabTastic is a good, accessible approach with decent documentation.

Answer 2

Have a DIV which encloses the entire area controlled by the tabs. Add and remove CLASSes 'tab1', 'tab2', 'tab3' to that outer DIV based on the selected tab. Have CSS rules which display the proper internal DIVs based on the enclosing CLASS. For example:

#A, #B, #C, #D, #E, #F {display:none}

.tab1 #A, .tab1 #B {display:block}

.tab2 #A, .tab2 #C {display:block}

.tab3 #A, .tab3 #B, .tab3 #C {display:block}