Question

I’m trying to use tabs to activate both a Coda slider in the left column and tabbed content in the center of the page. The slider is activated but the tabs are not.

Here’s the jquery from the top of the page:

$(".tab_content").hide();
$("ul.tabs li:first").addClass("current_page_item").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("current_page_item");
    $(this).addClass("current_page_item");
    $(".tab_content").hide();
    var activeTab = $(this).find('id').attr('a');
    //alert(activeTab);
    $(activeTab).show('slow'); 
    return false;
}   

I’ve tried both .attr(‘a’); and .attr(‘id’); but only the slider fires, the tab container goes blank.

I’m new at this and just trying to learn javascript and jquery. I have been reading on a lot of forums but can’t find anyone trying to activate two tab or slider containers with only a single set of tabs.

Thanks much for any help.

<div id="menu"> 
    <ul class="tabs"> 
       <li><a href="#0" class="xtrig" rel="coda-slider-1" id="tab0">Why Us?</a></li>     
       <li><a href="#1" class="xtrig" rel="coda-slider-1" id="tab1">CCW Class</a></li> 
       <li><a href="#2" class="xtrig" rel="coda-slider-1" id="tab2">Beginner</a></li> 
       <li><a href="#3" class="xtrig" rel="coda-slider-1" id="tab3">Advanced</a></li> 
    </ul>
</div>

Answer 1

This is working to fire both the coda slider and change the tab container by clicking a tab.
`

            });
            $(".tab_content").hide(); //Hide al content
            $("ul.tabs li:first").addClass("current_page_item").show();//Activate first tab
            $(".tab_content:first").show();//Show first tab content
            //On Click Event
            $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("current_page_item");
                $(this).addClass("current_page_item");

                $(".tab_content").hide(); //hide all content tabs
                var activeTab = $(this).data('getTab'); //get the html5 data element
                //var selectTab = "#"+activeTab;
                //alert(activeTab); //debugging
                //$(activeTab).show('slow'); 
                $(activeTab).fadeIn();
                return false;

            });


<ul class="tabs">
    <li data-getTab="#content0"><a href="#1" class="xtrig" rel="coda-slider-1" >Why Us?</a></li>
    <li data-getTab="#content1"><a href="#1" class="xtrig" rel="coda-slider-1" >CCWClass</a></li>
    <li data-getTab="#content2"><a href="#2" class="xtrig" rel="coda-slider-1" >Beginner</a></li>
    <li data-getTab="#content3"><a href="#3" class="xtrig" rel="coda-slider-1" >Advanced</a></li>

`

It changes up to nine tab containers with the corresponding coda slider panels in the left column.
Thanks to all.