Question

Basically I have a tabbed Panel I’m creating. When the user click on a tab I want the panel to switch out. The tab has a class identical to a class on the corresponding panel. I want to use jQuery get ($this) class and to say when you click on the tab with XX class add class “.active” to all DIVs with XX class.

Here’s my HTML:

<div class="bundle_panel">
    <div class="tab tXX">TITLE_HERE</div>
    <div class="panel tXX">CONTENT_HERE</div>
</div>

I’ve tried this jQuery to no efect:

$(".bundle_panel .tab").click(function(){
    var panelClass = $(this).attr("class");
    $(panelClass).addClass('active');
});

Any help would be appreciated. Let me know if I need to clarify anything or give more information.

Answer 1

The issue with your example is that the click will result in assigning the value of “tab tXX” to your panelClass variable. Then your line $(panelClass).addClass('active'); is trying to add the active class to an element that doesn’t exit. If you use:

$(".bundle_panel .tab").click(function(){
    var panelClass = $(this).attr("class").split(' ');
    $(".panel."+panelClass[1]).addClass('active');
});​

this will apply the active class to all elements with the “panel” class and the second class of the element clicked on (using your example code, TXX). jsFiddle example.