In previous posts, I explained jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Here, I will show you a simple example of .toggleClass() using jQuery in ASP.Net.
In simple, using .toggleClass() you can add or remove the CSS class from element.
To implement this we need to write the code like as shown below
jQuery .toggleClass()
.toggleClass() uses for add or remove one or more classes from each element in the set of matched element.In simple, using .toggleClass() you can add or remove the CSS class from element.
To implement this we need to write the code like as shown below
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="Default.aspx.cs"
Inherits="ResizabeDiv._Default"
%>
<!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>jqury toggleClass Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"
type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css"
type="text/css"
media="all"
/>
<style type="text/css">
.demodiv
{
height:100px;
width:100px;
background-color:Gray;
}
.newclass
{
height:250px;
width:250px;
background-color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#btnToggle").click(function () {
$("#demodiv").toggleClass("newclass",1000);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="demodiv"
class="demodiv">
</div>
<asp:Button ID="btnToggle"
runat="server"
Text="Click
me!!" />
</form>
</body>
</html>
No comments:
Post a Comment