Home > Developer > JavaScript
Example of toggleClass () method usage in jQuery, jquerytoggleclass
This document describes the use of the toggleClass () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method switches between one or more classes that add or remove matching elements.
The toggleClass () method checks the class specified in the matching element. If not, add a class. If set, delete it. This is the so-called switching effect.
Syntax structure 1:
Copy codeThe Code is as follows: $ (selector). toggleClass (class, switch)
Delete (ADD) a class if it exists (does not exist.
Parameter List:
| Parameters | Description |
| Class | Specifies the class to be added or deleted. If you want to add multiple classes, use the space interval. |
| Switch | Optional. Boolean value. If it is true, the corresponding class is added; otherwise, the class is deleted. |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
. Content {display: none ;}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). toggleClass ("content ");
})
})
</Script>
</Head>
<Body>
<Button> Add more content </button>
<Div class = "content"> <textarea cols = "40" rows = "5" name = "textarea"> </textarea> </div>
</Body>
</Html>
Syntax structure 2:
Copy codeThe Code is as follows: $ (selector). toggleClass (function (index, class), switch)
The Return Value of the function is used as the switching class.
Parameter List:
| Parameters | Description |
| Function (index, class) | The Function Definition returns one or more class names to be added or deleted. Index-(optional) index location of the selector. Class-(optional) The current class that accepts the selector. |
| Switch | Optional. Boolean value. If it is true, the corresponding class is added; otherwise, the class is deleted. |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
. Content {display: none ;}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). toggleClass (function (){
Return "content"
});
})
})
</Script>
</Head>
<Body>
<Button> Add more content </button>
<Div class = "content"> <textarea cols = "40" rows = "5" name = "textarea"> </textarea> </div>
</Body>
</Html>
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
