Hi ,
I have a scenario where i have 4 asp buttons , on click of each button there are 4 labels inside 4 seperate divs where each displays seperate data.
Now if i click second button i need to display second label text inside 2nd div and hide all other divs.How can i achieve this ?
OnClientClick event of each button calls displayAlternate() which displays repective div and hides other.
displayAlternate('second'); return false; --> if i do this server side event is not fired ...
if i return true div second label is not getting displayed..
How can i achieve functionality where all divs expect 2nd is hidden and i get server side event also..
Please help.
Below is my following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function displayAlternate(id) {
if (id == "second") {
document.getElementById("secondDiv").style.display = 'block';
document.getElementById("thirdDiv").style.display = 'none';
document.getElementById("fourthDiv").style.display = 'none';
document.getElementById("firstDiv").style.display = 'none';
}
else if (id == "third") {
document.getElementById("secondDiv").style.display = 'none';
document.getElementById("thirdDiv").style.display = 'block';
document.getElementById("fourthDiv").style.display = 'none';
document.getElementById("firstDiv").style.display = 'none';
}
else if (id == "fourth") {
document.getElementById("secondDiv").style.display = 'none';
document.getElementById("thirdDiv").style.display = 'none';
document.getElementById("fourthDiv").style.display = 'block';
document.getElementById("firstDiv").style.display = 'none';
}
return false;
}
</script>
<div style="width: 100%; height: 100%">
<div style="width: 25%; height: 45%; float: left">
<asp:Button ID="button1" runat="server" Text="Button1" OnClientClick="displayAlternate(first);return false;" />
<asp:Button ID="button2" runat="server" Text="Button2"
OnClientClick="displayAlternate('second'); return false;"
onclick="button2_Click"/>
<asp:Button ID="button4" runat="server" Text="Button3" OnClientClick="displayAlternate('third');return false;"/>
<asp:Button ID="button3" runat="server" Text="Button4" OnClientClick="displayAlternate('fourth');return false;" />
</div>
<div style="width: 45%; height: 45%; float: right">
<div id="firstDiv" style="display: block">
<asp:Label ID="label1" runat="server" Text="First Text" />
</div>
</div>
<div id="secondDiv" style="display: none">
<asp:Label ID="label2" runat="server" Text="Second Text" /></div>
<div id="thirdDiv" style="display: none">
<asp:Label ID="label3" runat="server" Text="Third Text" />
</div>
<div id="fourthDiv" style="display: none">
<asp:Label ID="label4" runat="server" Text="Fourth Text" />
</div>
</div>
</form>
</body>
</html>