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

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:

$(".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>

---

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

---

$("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();
});

---

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

---

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.

---

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>