How to collapse all divs with change of a tab in jQuery Tabs UI?

2 Views

I’m using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the “entry-post” markup in each tab div, but I’m not showing the php, as the resulting html markup in each tab div is the important part.

I’m also using a bit of jQuery to independently expand/collapse each entry-content div:

Read More
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });

What I’ve found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they’re still expanded in tabone.

What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.

What do I need to add to this function to collapse all the entry-content divs when a tab is changed? 

$(document).ready(function(){ 
var $tabs= $("#tabs").tabs(); 
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});

Main tabs and entry-content div markup: 

<div id="tabs">
    <ul>
    <li><a href="#tabone">tabone</a></li>
    <li><a href="#tabtwo">tabtwo</a></li>
    <li><a href="#tabthree">tabthree</a></li>
    </ul>

    <div id="tabone">

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>
    </div>

    <div id="tabtwo">

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>
    </div>

    <div id="tabthree">

....

</div></div>
Post Views: 2

Related posts

Leave a Reply

5 comments

  1. The following code should collapse all .entry-content divs whenever a new tab is selected:

    $(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
        }
    }); 
});

  2. $("div.post [name^="entry-title"]").hide();

    should do what you’re wanting when attached next to your fx.

    or: 

    $("#tabs a").click(function () {
  $("div.post [name^="entry-title"]").hide();
});

  3. I’m not sure i understand you’re question completely. But if you wan’t to check whether the tab is triggered or not, try use this:

    $( ".selector" ).tabs({
  show: function(event, ui) { ... }
});

    Simplified how you could collapse all divs with class “entry-post”, whenever the tab is showed:

    $(document).ready(function(){ 
  var $tabs = $("#tabs").tabs({
    show: function(){
      $('.entry-post').hide();
    }
  });
});

  4. I’m not a jQuery expert, so here’s straight javascript. Might at least help solve the problem…
    Since you don’t care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it’s on.

    var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
  divitem.style.display = "none";
}

    I wish my jQuery was stronger so I could give it in that, but it may help…

    Edit:
    Just looking at what your example code, I guess something like this in jQuery:

    $("#tabs a").click(function() { $(".entry-content").hide(); });

    Something that closes all entry-content class divs when any tab is clicked.

  5. You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.

    http://jqueryui.com/demos/tabs/

    Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

    or download it and remove what you don’t need. Add the following to your CSS

    .ui-tabs .ui-tabs-hide {
  display: none !important;
}

    and change your references so they are in keeping with the jqueryUI specification

    <div id="tabs">
<ul>
    <li><a href="#tabs-1">tabone</a></li>

    and then the div ids to match

      <div id="tabs-1">
    <div class="entry-post">

    this should make the association. You can then add the controlling behaviour so it should read

    $(document).ready(function(){

    $(function() {
            $('#tabs').tabs();
        });

    and that will do away with the need to store the array of divs

    you can then bind a function to the tabselect event which will hide the divs you want to collapse

    $('#tabs').bind('tabsselect', function(event, ui) {
            $('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
        });

    your code should then read:

    <head>
<title>Collapse Divs</title>
<style type="text/css">

    .ui-tabs .ui-tabs-hide {
        display: none !important;
    }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(function() {
            $('#tabs').tabs();
        });

        $('#tabs').bind('tabsselect', function(event, ui) {
            $('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
        });

        $(".entry-content").hide();

        $(".entry-title").click(function() {
            $(this).parent().children(".entry-content").slideToggle(500); 
            });

});
 </script>
</head>
<body>
    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">tabone</a></li>
    <li><a href="#tabs-2">tabtwo</a></li>
    <li><a href="#tabs-3">tabthree</a></li>
    </ul>

<div id="tabs-1">
    <div class="entry-post">
...
    <h1 class="entry-title">Title 3.3</h1>
        <div class="entry-content">Lorem ipsum...</div>
    </div>
</div>

</body>