Question

Afternoon. Im struggling with this situation.

I have a very simple tabbed content inside an AnythingSlider slide. The tabs work fine for the first slide but, when I switch slides the tab wont work.

Only the first slide works and if i change slides and click on the tabs I can see on Chrome’s developer tools that the first slide’s tabs are changing.

This is the tabs script.

$(document).ready(function(){
        $('.top5tabs').css("display","block");
        $('.top5tabs div').hide();
        $('.top5tabs div:first').show();
        $('.top5tabs ul li:first').addClass('active');
            $('.top5tabs  ul li a').click(function(){
            $('.top5tabs ul li').removeClass('active');
            $(this).parent().addClass('active');
            var currentTab = $(this).attr('href');
            $('.top5tabs div').hide('fast');
            $(currentTab).show('fast');
        return false;
        });
    });

and this is the html that repeats on each one of the slides.

<div class="top5tabs">

            <ul class="tabnav">

                <li><a href="#tab-1">option 1</a></li>

                <li><a href="#tab-2">option 2</a></li>

            </ul>

            <div id="tab-1" class="tabdiv">content</div>
            <div id="tab-2" class="tabdiv">content</div>
</div>

Answer 1

Your problem is that you’re trying to use the same “id” values for multiple elements on the page. You can’t do that and expect stuff to work.

When you need multiple sets of tabs, you could switch to using “class” values to identify the <div> element to show instead of an “id”.

Here is an update of your fiddle with unique “id” values.

edit — and here is the version that keeps the tab control local to each group of tabbed elements.