Multiple jQuery UI Tabs on Page: Close all other tabs when another is opened

I've got several rows of of separate jQuery Tabs. How do I get the separated tabs to close when another is opened (so at max, 1 is open at any given time on the page):

Markup:

<!-- First Leadership Row -->
<div id="leadershipTabs1" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li><a href="#leader1-slug">Leader 1 Tab Link</a></li>
        <li><a href="#leader2-slug">Leader 2 Tab Link</a></li>
        <li><a href="#leader3-slug">Leader 3 Tab Link</a></li>
        <li><a href="#leader4-slug">Leader 4 Tab Link</a></li>
    </ul>

    <div id="leader1-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 1 Content Here --></div>
    </div>

    <div id="leader2-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 2 Content Here --></div>
    </div>

    <div id="leader3-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 3 Content Here --></div>
    </div>

    <div id="leader4-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 4 Content Here --></div>
    </div>

</div><!-- #leadershipTabs -->
<!-- #First Leadership Row -->

<!-- Second Leadership Row -->
<div id="leadershipTabs2" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li><a href="#leader5-slug">Leader 5 Tab Link</a></li>
        <li><a href="#leader6-slug">Leader 6 Tab Link</a></li>
        <li><a href="#leader7-slug">Leader 7 Tab Link</a></li>
        <li><a href="#leader8-slug">Leader 8 Tab Link</a></li>
    </ul>


    <div id="leader5-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 5 Content Here --></div>
    </div>

    <div id="leader6-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 6 Content Here --></div>
    </div>

    <div id="leader7-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 7 Content Here --></div>
    </div>

    <div id="leader8-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 8 Content Here --></div>
    </div>

</div><!-- #leadershipTabs -->
<!-- #Second Leadership Row -->

Firing the jQuery Tabs:

jQuery('.leadershipTabs').tabs({
    active: false,
    collapsible: true 
});

Upvotes: 1

Answers (2)

Trialsman

Reputation: 359

Thanks to oMiKeY for pointing me in the right direction. However, when I run the above sample, it is not completely functional. For example: click Leader 1, then click Leader 5, and then click Leader 1 again. Unfortunately, Leader 1 eats the click and does not display its content because it doesn't know that its content was hidden using css, jquery thinks it is still there.

First I slightly changed the class naming structure so the related elements: tabs group <div id>, <li> anchor, and the panels <div id> all begin with either leader1 or leader2.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="leader1Tabs" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
<ul>
    <li id="anchor1"><a href="#leader1-1">Leader 1</a>
    </li>
    <li id="anchor2"><a href="#leader1-2">Leader 2</a>
    </li>
    <li id="anchor3"><a href="#leader1-3">Leader 3</a>
    </li>
    <li id="anchor4"><a href="#leader1-4">Leader 4</a>
    </li>
</ul>
<div id="leader1-1" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader1-2" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader1-3" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader1-4" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
</div>

<div id="leader2Tabs" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
<ul>
    <li id="anchor5"><a href="#leader2-5">Leader 5</a>
    </li>
    <li id="anchor6"><a href="#leader2-6">Leader 6</a>
    </li>
    <li id="anchor7"><a href="#leader2-7">Leader 7</a>
    </li>
    <li id="anchor8"><a href="#leader2-8">Leader 8</a>
    </li>
</ul>
<div id="leader2-5" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader2-6" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader2-7" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader2-8" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
</div>

Then use the built-in jquery-ui tabs function to close the previous tab:

    var hold; //the previous active tab
    var dom; //the current active tab
    $('li').click(function () {
        dom = $(this).find('a').attr('href');  //example results are #leader1-1 or #leader2-5
        dom = dom.substring(1,8);  //use substring to return only 'leader1' or 'leader2'
        if ((hold == undefined)){  //for the first tab click
            hold = dom;  //to set the previous active tab
        }else if(dom !== hold){  //on all subsequent clicks, close the previous active tab
            $('#'+hold).tabs({active:false});  //jquery-ui tabs function
            hold = dom;  //update the previous tab
        }
    });

While the user clicks within a single tabs group, the test variables will both come back the same, both leader1 or both leader2. When the user clicks another tabs group, the test variables don't match and the previous tabs group is closed.

Upvotes: 2

omikes

Reputation: 8553

The only problem I could find was that you were not including links inside the

tags. These links must have an href that matches the id of the divs you made below. Eg:

jQuery('.leadershipTabs').tabs({
    active: false,
    collapsible: true
});

$('li').click(function () {
    var dom = $(this).find('a').attr('href');
    $('.leaderPod').not(dom).hide();
    $('.ui-tabs-active').not(this).removeClass('ui-tabs-active');
    $('.ui-state-active').not(this).removeClass('ui-state-active');
    document.getElementById($(this).attr('id')).scrollIntoView(true);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="leadershipTabs1" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li id="anchor1"><a href="#leader1-slug">Leader 1</a>
        </li>
        <li id="anchor2"><a href="#leader2-slug">Leader 2</a>
        </li>
        <li id="anchor3"><a href="#leader3-slug">Leader 3</a>
        </li>
        <li id="anchor4"><a href="#leader4-slug">Leader 4</a>
        </li>
    </ul>
    <div id="leader1-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader2-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader3-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader4-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
</div>
<!-- #leadershipTabs -->
<!-- #First Leadership Row -->
<!-- Second Leadership Row -->
<div id="leadershipTabs2" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li id="anchor5"><a href="#leader5-slug">Leader 5</a>
        </li>
        <li id="anchor6"><a href="#leader6-slug">Leader 6</a>
        </li>
        <li id="anchor7"><a href="#leader7-slug">Leader 7</a>
        </li>
        <li id="anchor8"><a href="#leader8-slug">Leader 8</a>
        </li>
    </ul>
    <div id="leader5-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader6-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader7-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader8-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
</div>
<!-- #leadershipTabs -->
<!-- #Second Leadership Row -->

Upvotes: 1

Multiple jQuery UI Tabs on Page: Close all other tabs when another is opened

Answers (2)

Related Questions