ASP.NET make a panel visible on click of hyperlink (whilst also cuasing postback for page navigation
Posted
by Helen
on Stack Overflow
See other posts from Stack Overflow
or by Helen
Published on 2009-07-08T08:57:00Z
Indexed on
2010/04/07
20:03 UTC
Read the original article
Hit count: 785
I may be asking the impossible but let me set out my problem:
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.
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.
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.
Here is the source:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %>
<%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
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< 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";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
<uc1:LeadHeader ID="LeadHeader" runat="server" />
</asp:ContentPlaceHolder>
<div id="nav">
<div class="menu-item">
<a href="Default.aspx">
<img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)"
class="right" /></a>
</div>
<div class="menu-item">
<a href="AboutUs.aspx">
<img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)"
onmouseout="out(1)" class="right" /></a>
</div>
<%-- <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" >
<Panes>
<cc1:AccordionPane runat="server">
<Header>--%>
<div class="menu-item">
<a href="WhatWeDo.aspx">
<img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)"
onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div>
<%--/Header>
<Content>--%>
<div id="divDetails" style="display:none;">
<a href="management.aspx" title="Management Development">Management Development</a><br />
<a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br />
<a href="personal.aspx" title="Personal Development">Personal Development</a><br />
<a href="realteams.aspx" title="Team Building / Facilitation">Team Building & Facilitation</a><br />
<a href="coaching.aspx" title="Coaching">One to One Coaching</a>
</div>
<%-- </Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
--%>
<div class="menu-item">
<a href="OurApproach.aspx">
<img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)"
onmouseout="out(3)" /></a>
</div>
<div class="menu-item">
<a href="OurValues.aspx">
<img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)"
onmouseout="out(4)" /></a>
</div>
<div class="menu-item">
<a href="ContactUs.aspx">
<img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)"
onmouseout="out(5)" /></a>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
<uc2:LeadFooter ID="LeadFooter" runat="server" />
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
© Stack Overflow or respective owner
