show/hide tabs based on checkbox selection

Question

I have 4 tabs on one JSP page. Let's say Tab 1, Tab2, Tab3, Tab4. Initially Tab1 is enabled means user can do his work on Tab1 freely but other tabs (Tab2, Tab3, Tab4) are being disabled that means when user will click on Tab2 or Tab3 or Tab4 then he cannot see the contents of those tabs. A check box is present on my first tab i.e Tab1, if user will check that checkbox then Tab2 will be enabled and contents of Tab2 will be visible to user and in this time user can also view the contents of Tab1, so two Tabs(Tab1 and Tab2) are now enabled, when user will click Tab1 then s/he can do any operation on the contents of Tab1 and if s/he will click on Tab2 then like Tab1 s/he can do any operation on the contents of Tab2(like two tabs in a browser) but contents of Tab3 and Tab4 are disabled until user checks other two check boxes present in Tab1. Now if user comes to Tab1 and unchecks second check box then Tab2 will be disabled and user will be prohibited to see the contents of Tab2. How to do it in jquery/javascript/ajax/css/any ways?

Any help is much appreciated.

Unknown Unknown · Accepted Answer · 2012-01-24T07:39:15

Take a look at JSFiddle Live Demo it should provide a fairly good example to start on, in short, what you need to do is when the user clicks on a element, you want to hide all tabs, and show only the one corresponding to your needs, here's a snip of the code:

var tabids = ["tab-1", "tab-2", "tab-3"];

function showtab(index) {
    var i;
    for (i = 0; i < tabids.length; i++) {
        $("#" + tabids[i]).hide();
    }
    $("#" + tabids[index]).show();
}

as you can see, I've defined an array which contain the ids of the tabs that I need to show/hide.

EDIT: Please take a look at JSFiddle Live Demo Take #2

show/hide tabs based on checkbox selection

1 Answers