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