using jquery .slideToggle in asp.net
1. In this post i will show how to toggle between slide up and slide down.
For example :
if we click on a button a label is shown again we click on that button that label will go hidden,
This sequence of getting shown and hidden is known as Toggle. i.e. something which is getting on and off.
2. Iam going to take two scenarios here.
In one of the scenario i will show and hide a label control on the button click event.
while for another example i will show and hide a veritcal menu bar on the Panel header click.
3. Jquery slideToggle Syntax:
$("#youControlID").slideToggle(Speed,easing,callback);
4.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquerySlideToggle.aspx.cs"
Inherits="jquerySlideToggle" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type='text/javascript'>
function FnMenu1() {
$("#Menu").slideToggle("Fast");
}
function FnMenu2() {
$("#Submenu").slideToggle("slow","linear");
}
</script>
</head>
<body>
<form id="form1" runat="server">
-------Example 1---------
<br />
<input id="Button2" type="button" onclick="FnMenu1()" value="button" />
<div id="Menu" style="background-color: Red; width: 100px;">
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Left">
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Redemption"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</div>
<br />
<br />
-------Example 2---------
<br />
<div id="Menu2" style="background-color: White; width: 100px;">
<asp:Panel ID="Panel2" runat="server" onClick="FnMenu2()" HorizontalAlign="Left">
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Menu"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<div id="Submenu" style="background-color: Aqua; width: 100px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<asp:LinkButton ID="LinkButton1" runat="server">Sub menu 1</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="LinkButton2" runat="server">Sub menu 2</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="LinkButton3" runat="server">Sub menu 3</asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
5.Run the project to get expected Final Result.
No comments:
Post a Comment