toggle

UK[ˈtɒgl] US[ˈtɑ:gl]

n.Stick button; lasso button; conversion key; switch key

v.Switch

class

##UK[klɑ:s] US[klæs]

n.Class; class; level; type

vt. Classify… into a certain level, regard… (or classify, classify); put… into a certain class

adj. Very good, excellent, outstanding of

vi. Belongs to... category (or level) and is listed as a certain category (or level)

jquery toggleClass() method syntax

Function: toggleClass() Toggles one or more classes that set or remove the selected element. This method checks the specified class in each element. Adds the class if it does not exist, or removes it if it is set. This is called a toggle effect. However, by using the "switch" parameter, you can specify that only classes be removed or only added.

Syntax: $(selector).toggleClass(class,switch)

Parameters:

ParameterDescription
class Required. Specifies the addition or removal of specified elements of class. If you need to specify several classes, use spaces to separate class names.
switch Optional. Boolean value. Specifies whether to add or remove classes.

Use function to switch classes Syntax: $(selector).toggleClass(function(index,class),switch)

Parameters:

ParametersDescription
function(index,class) Required. Specifies a function that returns one or more class names that need to be added or removed.
index Optional. Accepts the index position of the selector.
class Optional. Accepts the current class of the selector.
switch Optional. Boolean value. Specifies whether to add (true) or remove (false) a class.

jquery toggleClass() method example

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
Run instance »

Click the "Run instance" button to view the online instance