jqueryjquery-uitabsjquery-ui-tabsjquery-tabs

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 
});
Solution

  • 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 -->