adding several jquery-ui tabs

Question

I am having trouble adding several jquery-ui tabs. Currently, after clicking on Field0 some information disappears from Field3 and vice versa.

I want to click on Field0 or Field1 and only apply changes to these fields. Field3 and Field4 do not respond to any events. I use the document.on as part of the code is downloaded dynamically.

My code: http://jsfiddle.net/scopex/muXCu

$(document).ready(function() {
    $(document).on("click", "ul.tabs a", function() {

        $("ul.tabs li").removeClass('active');
        $(this).parent().addClass('active');
        var classname = $(this).attr("class");
        $(".pane div").hide();
        $($(this).attr("href")).show();
        return false;
    });
})

Try to make the second group of tabs slightly different, like adding an extra class or something like that. — emerson.marini
– emerson.marini, Commented Apr 3, 2013 at 15:56

John S · Accepted Answer · 2013-04-03 16:05:24Z

1

You need to change $(".pane div").hide() so you only hide the siblings of the pane associated with the tab.

You could try this:

$(document).on("click", "ul.tabs a", function () {
    var $link = $(this),
        $pane = $($link.attr("href"));
    $link.removeClass('active').parent().addClass('active');
    $pane.show().siblings().hide();
    return false;
});

answered Apr 3, 2013 at 16:05

John S

21.5k9 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tabetha Moe · Accepted Answer · 2013-04-03 16:14:34Z

Is this what you are looking for?

I fixed it up a bit with what I think you are going for. Let me know if that helps.

What I did was add an id attribute to each div container that identified the divs as separate beings. Then I called the switch method only on the div that the click came from.

http://jsfiddle.net/YLbAj/

<div class="tabs" id="one">
<ul class="tabs">
<li><a href="#tab0_0">Field0</a></li>
<li><a href="#tab0_1">Field1</a></li>
</ul>
</div>
<div class="pane" id="onePane">
    <div id="tab0_0">Field 0</div>
    <div id="tab0_1">Field 1</div>
</div>

<br />

<div class="tabs" id="two">
    <ul class="tabs">
        <li><a href="#tab0_2">Field2</a></li>
        <li><a href="#tab0_3">Field3</a></li>
    </ul>
</div>
<div class="pane" id="twoPane">
    <div id="tab0_2">Field 2</div>
    <div id="tab0_3">Field 3</div>
</div>

$(document).ready(function() {
    $(document).on("click", "ul.tabs li a", function() {
        var whichPane = $(this).parents().eq(2).attr('id');
        $("ul.tabs li").removeClass('active');
        $(this).parent().addClass('active');
        var classname = $(this).attr("class");
        $("#" + whichPane + "Pane div").hide();
        $($(this).attr("href")).show();
        return false;
    });
    })

Collectives™ on Stack Overflow

adding several jquery-ui tabs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related