title: ASP.NET make a panel visible on click of hyperlink (whilst also cuasing postback for page navigation)
body: <p>I may be asking the impossible but let me set out my problem:</p>
  
  <p>I have a menu in a MasterPage which uses images and mouseover mouseout events for design purposes.
  On one of the menu options I need to display a set of sub menus options on the click of the parent menu item.  The menu item itself also needs to navigate to a specified url.</p>
  
  <p>I was originally trying to use an AJAX accordion panel but as I only had one accordion panel it was always displaying the sub menu items and was not collapsing.</p>
  
  <p>I have also tried putting the options in a div and setting the display via javascript.  This worked but then was overwritten once the page navigation postback occurred.</p>
  
  <p>Here is the source:</p>
  
  <pre><code>&lt;%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %&gt;
  &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %&gt;
  &lt;%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
          &lt;link href="StyleSheet.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script type="text/javascript"&gt;
  var revert = new Array();
  var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact');
  
  
  // Preload
  if (document.images) {
    var flipped = new Array();
     for(i=0; i&lt; inames.length; i++) {
      flipped[i] = new Image();
      flipped[i].src = "images/"+inames[i]+"2.jpg";
  
    }
  }
  
  function over(num) {
    if(document.images) {
      revert[num] = document.images[inames[num]].src;
      document.images[inames[num]].src = flipped[num].src;
  
    }
  }
  
  function out(num) {
    if(document.images) document.images[inames[num]].src = revert[num];
  }
  
  
  function ShowHide(elementId)
  {
      var element = document.getElementById(elementId);
      if(element.style.display != "block")
      {
          element.style.display = "block";
      }
      else
      {
          element.style.display = "none";
      }
  }
  function UpdateText(element)
  {
      if(element.innerHTML.indexOf("Show") != -1)
      {
          element.innerHTML = "Hide Details";
      }
      else
      {
          element.innerHTML = "Show Details";
      }
  }
  
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"&gt;
                  &lt;uc1:LeadHeader ID="LeadHeader" runat="server" /&gt;
              &lt;/asp:ContentPlaceHolder&gt;
              &lt;div id="nav"&gt;
                  &lt;div class="menu-item"&gt;
                      &lt;a href="Default.aspx"&gt;
                          &lt;img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)"
                              class="right" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="menu-item"&gt;
                      &lt;a href="AboutUs.aspx"&gt;
                          &lt;img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)"
                              onmouseout="out(1)" class="right" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;%--   &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
                  &lt;/asp:ScriptManager&gt;
                  &lt;cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
                      TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" &gt;
                      &lt;Panes&gt;
                          &lt;cc1:AccordionPane runat="server"&gt;
                              &lt;Header&gt;--%&gt;
                                  &lt;div class="menu-item"&gt;
                                      &lt;a href="WhatWeDo.aspx"&gt;
                                          &lt;img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)"
                                              onmouseout="out(2)"   class="right" onclick="ShowHide('divDetails');UpdateText(this);"  /&gt;&lt;/a&gt;&lt;/div&gt;
  
                             &lt;%--/Header&gt;
                              &lt;Content&gt;--%&gt;
                           &lt;div id="divDetails" style="display:none;"&gt;
  
                              &lt;a href="management.aspx" title="Management Development"&gt;Management Development&lt;/a&gt;&lt;br /&gt;
                                  &lt;a href="leadership.aspx" title="Leadership Development"&gt;Leadership Development&lt;/a&gt;&lt;br /&gt;
                                  &lt;a href="personal.aspx" title="Personal Development"&gt;Personal Development&lt;/a&gt;&lt;br /&gt;
                                  &lt;a href="realteams.aspx" title="Team Building / Facilitation"&gt;Team Building &amp; Facilitation&lt;/a&gt;&lt;br /&gt;
                                  &lt;a href="coaching.aspx" title="Coaching"&gt;One to One Coaching&lt;/a&gt;
                            &lt;/div&gt;
  
                          &lt;%--    &lt;/Content&gt;
                          &lt;/cc1:AccordionPane&gt;
                      &lt;/Panes&gt;
                  &lt;/cc1:Accordion&gt;
                 --%&gt;
  
              &lt;div class="menu-item"&gt;
                  &lt;a href="OurApproach.aspx"&gt;
                      &lt;img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)"
                          onmouseout="out(3)" /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="menu-item"&gt;
                  &lt;a href="OurValues.aspx"&gt;
                      &lt;img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)"
                          onmouseout="out(4)" /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="menu-item"&gt;
                  &lt;a href="ContactUs.aspx"&gt;
                      &lt;img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)"
                          onmouseout="out(5)" /&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;
          &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server"&gt;
              &lt;uc2:LeadFooter ID="LeadFooter" runat="server" /&gt;
          &lt;/asp:ContentPlaceHolder&gt;
          &lt;/div&gt;
       &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>