JQuery Expand/Collapse On Postback

Question

I have this code to expand/collapse (toggle) that works fine.

But when the page postback I want to maintain the state of the divs.

Right now if I refresh the page all the divs are collapsed.

How can I do it?

JS:

$(document).ready(
 function () {
     $(".header").click(function () {
         var $header = $(this),
    $span = $header.find(">:first-child"),
         //getting the next element
    $content = $header.next();        
         //open up the content needed
         $content.slideToggle(500);
     });
 });

HTML:

<div class="container">
   <div class="header">
       ...
   </div>
   <div class="content">
       ...
   </div>
</div>
<br />
<div class="container">
   <div class="header">
      ...
   </div>
   <div class="content">
       ...
   </div>
</div>

Answer 1

Why do you want to reload your entire page in the first place?

If you refresh your page it is same as loading your page for the first time and all the divs will be collapsed(as in your case).

If the postback is happening because of some event like click event then try to put ajax UpdatePanel Control around the elements you want to reload. This will avoid postback of entire page and only the elements within your UpdatePanel will be refreshed.