Monday, February 25, 2013

jQuey .toggleClass() Example in ASp.Net

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.

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>

Demo


No comments:

Post a Comment

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo