Question

i am using jquery accordion as a menu in asp.net Masterpage.

This is jquery

$(document).ready(function() {
    $(".header").click(function() {
        $(this).toggleClass("display");
        $(this).next("div .menu_body").slideToggle(500);
    });
});

This is html.

  <div id="MasterPage_Menu" class="menu_list">
  <p class="header">Header-1</p>
    <div class="menu_body">
        <a href="page1.aspx">Link-1</a>
    </div>
  <p class="header">Header-2</p>
    <div class="menu_body">
        <a href="page2.aspx">Link-2</a>
    </div>
  <p class="header">Header-3</p>
    <div class="menu_body">
        <a href="page3.aspx">Link-3</a>
   </div>
  </div>

According the code above, when the header is clicked, the content (menu_body) will be slided toggle.
The menu_body is hide at default, when the user click on the header, the menu_body is visible.

Example Problem: eg: 2 menu_body is visible, when i click on href = “page1.aspx”, the page will be navigated to page2.aspx but the accordion will return to be default which all the menu_body is hidden.

Since I am using this accordion in master page, i fail to store the value to keep track of the accordion menu_body status into the hiddenfield when the page is navigated away. The value in hiddenfield will be reset.

I am thinking to store this in session, but in client page, it doesn’t allow us to store value into the session.

Any solution for this?

Answer 1

If you add id attributes to your headers:

<p class="header" id="header-1">Header-1</p>
    <div class="menu_body">
        <a href="page1.aspx">Link-1</a>
    </div>

Then you can pull the id out in your handler and use jquery.cookie to track the open panel in a cookie:

$(".header").click(function() {
    var $this = $(this);
    if(!$this.hasClass('display'))
        $.cookie('open_panel', this.id);
    $this.toggleClass("display");
    $this.next("div .menu_body").slideToggle(500);
});

You’d need to play with the storage format for open_panel a bit if you want to have multiple panels open at one time but a simple CSV list would probably suffice; I’ll leave that part as an exercise for the reader. You’d also want to check the cookie when the page loads and open the appropriate panels.

You could also keep track of the cookie’s value on the server if you wanted to keep the setting around as part of the user’s account preferences.