Tutorial: Keep state of Collapsible Panel
Share/Save/Bookmark
Description: This topic will show you how to keep the position of a collapsible panel during postbacks.  I have this markup and code in a MasterPage to control the menu's for my site.

Notes: (None)
Add the following markup to have a collapsible panel on your page

<asp:UpdatePanel ID="upnlMainNavigation" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <Ajax:CollapsiblePanelExtender ID="cpeMainNavigation" runat="server" TargetControlID="cpnlMainNavigationContent" ExpandControlID="cpnlMainNavigationTitleBar" CollapseControlID="cpnlMainNavigationTitleBar" ImageControlID="cpnlMainNavigationTitleBarImageToControl" Collapsed="False" SuppressPostBack="True" />

     
      <asp:Panel ID="cpnlMainNavigationTitleBar" CssClass="MainMenuTitlePanel" runat="server" Width="100%">
         <nobr>
            <div class="AllMenuTitleBar">
               <div class="AllTitleBarImageDiv">
                  <asp:Image ID="cpnlMainNavigationTitleBarImageToControl" runat="server" ImageUrl="Images/Vista_Arrow_Up.gif" />
               <div>
               <div class="AllTitleBarText">Main Navigationdiv>
            <div>
         <nobr>
      <asp:Panel>
   
     
      <asp:Panel ID="cpnlMainNavigationContent" runat="server" Width="100%" CssClass="MainMenuTargetPanel">
         <div class="MainMenuTargetPanelDIV">
            <ul>
               <li>
                  <nobr>
                     <asp:HyperLink runat="server" ID="imgLnkMainNavigationHome" NavigateUrl="~/Default.aspx" ImageUrl="~/images/home.gif" CssClass="AllMenuIcon" ToolTip="Home">asp:HyperLink>
                     <asp:HyperLink runat="server" ID="lnkMainNavigationHome" NavigateUrl="~/Default.aspx" CssClass="AllMenuText">Homeasp:HyperLink>
                  nobr>
               <li>
               <li>
                  <nobr>
                     <asp:HyperLink runat="server" ID="imgLnkMainNavigationContactUs" NavigateUrl="~/ContactUs.aspx" ImageUrl="~/images/ContactUs.gif" CssClass="AllMenuIcon" ToolTip="Contact Us">asp:HyperLink>
                     <asp:HyperLink runat="server" ID="lnkMainNavigationContactUs" NavigateUrl="~/ContactUs.aspx" CssClass="AllMenuText">Contact Usasp:HyperLink>
                  <nobr>
               <li>
            <ul>
         <div>
      <asp:Panel>
   <ContentTemplate>
<asp:UpdatePanel>

To allow the server to have access to values, we will add a HiddenField to the markup 

<asp:UpdatePanel ID="upnlNavigation" runat="server">
   <ContentTemplate>
      <asp:HiddenField ID="HiddenMainNavigation" runat="server" />
   </ContentTemplate>
<asp:UpdatePanel>

The next section shows how to add javascript to keep the state of the collapsible panel

<script type="text/javascript">
   // This section Keeps the memory for the collapsible panels in the menu pane
   var objExtenderMain;
  
   // this will run automatically when the page has finished loading
   function pageLoad(sender, args)
   {

   //Main
   objExtenderMain = $find("<%=cpeMainNavigation.ClientID%><%=cpeMainNavigation.ClientID%><%=cpeMainNavigation.ClientID%>");
   objExtenderMain.add_expandComplete(getMainNavigationState);
   objExtenderMain.add_collapseComplete(getMainNavigationState);

   }

   // This is for the constantly displayed collapsible panel
   function getMainNavigationState()
   {
      if(objExtenderMain.get_Collapsed())
      {
         //Collapsed
         $get("<%=HiddenMainNavigation.ClientID%>").value="1";
         __doPostBack("<%=HiddenMainNavigation.ClientID%>",'');
      }
      else
      {
         //Expanded
         $get("<%=HiddenMainNavigation.ClientID%>").value="0";
         __doPostBack("<%=HiddenMainNavigation.ClientID%>",'');
      }
   }
<script> 

To control the collapsible panel from the server side code, you can use the following example.  NOTE: I keep the value of the collapsible panel's positin in a Session variable and during the Page_Load event, I set the collapsed state of the panel. 

if( Session["NavigationSessionState"] == null )
{
   List<string> list = new List<string>( 16 );
   Session["NavigationSessionState"] = list;
}
else
{
   List<string> list = (List<string>)Session["NavigationSessionState"];
   
   // Main Navigation
   if( HiddenMainNavigation.Value != "" )
   {
      if( HiddenMainNavigation.Value == "1" )
      {
         if( !list.Contains( "MainNavigation" ) )
         list.Add( "MainNavigation" );
      }
      else
      {
         if( list.Contains( "MainNavigation" ) )
            list.Remove( "MainNavigation" );
      }
   }
   if( list.Contains( "MainNavigation" ) )
      cpeMainNavigation.Collapsed = true;
   else
      cpeMainNavigation.Collapsed = false;
}