Question

Last two nights I am struggle with below code. The problem is I need to remember expanded (or) collapsed toggles sections and on page reload I have show them as is expanded (or) collapsed.

$(function() {        
        $('tr.subCategory')            
        .css("cursor", "pointer")
        .attr("title", "Click to expand/collapse")
        .click(function() {        
               $(this).siblings('.RegText').toggle();            
     });
     $('tr[@class^=RegText]').hide().children('td');    
})

I found small solution in another forum like this. Storing “.subCategory” id values in hidden field in commas-seperated values.

In Asp.net page:
<input id="myVisibleRows" type="hidden" value="<% response.write(myVisibleRowsSavedValue) %" />  

In .js:
var idsStr = $(#myVisibleRows).val();

Now My question is: How to store multiple values (.subCategory id) in hidden field when I click on toggle?. also How to parse them back and iterate them get ids and show toggles?. I am very very new to jQuery. Please some one help me out from this.

Answer 1

Passing this kind of values in a form isn’t probably the best thing to do it. I’d suggest using cookies to store expanded sections id’s or something similar. It’s much easier to implement and you are not passing unimportant form data between requests. If you want to store multple values you can serialize them (easiest thing: use join function in JS) before you store them and deserialize (split) after reading it from a cookie.