Tuesday, 18 December 2012

JavaScript to hide/show DIV

ASP.NET, Toggle DIV on button click

To toggle DIV using javascript,we simply add a button in .aspx page and DIV with menu itme in it. which will toggle based on onclick/onmouseover event.
  1. Add button in .aspx page
<asp:Button ID="Button1" runat="server" Text="Send to my Facebook" Width="20px" OnClientClick="toggle('mnDv');" />

   2.Add DIV  to toggle onclick event
<div id="mnDv" runat="server"><asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"><Items><asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/><asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/></Items></asp:Menu></div>
3 .Add Javascript method hide/show DIV

<script type="text/javascript">function toggle(id) {
var o = document.getElementById(id);o.style.display = (o.style.display ==
'none') ? 'block' : 'none';}
4 . Now click on toggle button to hide/show DIV.
This can also work of  onmouseover event of button.
Enjoy....Happy Coding.

No comments:

Post a Comment