toggleClass(), jQuery
The toggleClass(), from jQuery adds or removes the specified class. In the example below, you'll see a practical application.
Syntax:
See the example below.
<head>
<style type='text/css'>
.line{
color:orange;
font-weight:bold;
border:solid 1px green;
}
.alter{
color:white;
font-style:italic;
border:solid 2px blue;
background:orange;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var num=0
$('.line').click(function(){
$(this).toggleClass('alter')
})
})
</script>
</head>
<body>
<p class='line'>Click! This is the first Line...</p>
<p class='line'>Click! This is the second Line..</p>
<p class='line'>Click! This is the third Line..</p>
<p class='line'>Click! This is the fourth Line..</p>
</body>
</html>
Click on of the lines once, twice...and see what happens.
Syntax:
selector.toggleClass("ClassName")
See the example below.
<head>
<style type='text/css'>
.line{
color:orange;
font-weight:bold;
border:solid 1px green;
}
.alter{
color:white;
font-style:italic;
border:solid 2px blue;
background:orange;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var num=0
$('.line').click(function(){
$(this).toggleClass('alter')
})
})
</script>
</head>
<body>
<p class='line'>Click! This is the first Line...</p>
<p class='line'>Click! This is the second Line..</p>
<p class='line'>Click! This is the third Line..</p>
<p class='line'>Click! This is the fourth Line..</p>
</body>
</html>
Click on of the lines once, twice...and see what happens.
Click! This is the first Line...
Click! This is the second Line..
Click! This is the third Line..
Click! This is the fourth Line..