Programming

jQuery Toggleclass

August 6, 2021

Introduction of jQuery toggleClass

jQuery toggleclass simplifies the JavaScript programming language which is easy to learn and we can extend it by writing plugins. It supports many features like animations, event handling, DOM manipulation, lightweight, AJAX support, and cross-browser support.

By using the toggleClass() method we can toggle between the classes with selected elements from the set of matched elements. When we want to switch between the effects or styles whenever we are changes the states of our user interface to make it a more attractive and interactive user interface this can be done quickly and easily by using the toggleClass() method.

Syntax:

In simple words, we can say that the toggleClass() method is used to add or remove a class from the element. The toggleClass() method syntax in the jQuery. It is an inbuilt method in jQuery.

$(selector).toggleClass(className [ , function] [, switch][,options])

Parameters of jQuery toggleClass()

It contains some parameters. Some of the details of the parameters are:

  • className: The className should be of string type. It can take one or more class names they are separated by commas.
  • Function: It is an optional parameter that returns the class names. It takes the index position and class name of an element.
  • Switch: The switch should be of a Boolean type and it is an optional parameter. It helps us to determine whether a class should be added or removed.
  • Duration: The duration can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the duration is 400 milliseconds. It can take slow, fast or normal as a string parameter. This helps us to control the slide animation based on our requirements.
  • Easing: The easing should be of string type. It is used for transition. The default value is swing.
  • Queue: The queue takes the Boolean value. If the Boolean value is true it indicates whether to place or not to place the animation. If the Boolean value is false the animation will take place immediately.
  • Complete: This function is called once the animation is completed on an element.
  • Children: Children take the Boolean value. It is helpful to determine which descendant to animate.

Examples of jQuery toggleClass()

This is a simple example of the toggleClass() method. In this example, we can observe the toggleClass() method effect on the paragraph.

Example #1

<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#btn”).click(function(){
$(“p”).toggleClass(“highlight”);

</script>
<style>
.highlight {
background:blue;
font-size: 200%;
color: white;
}
</style>
</head>
<body>
<button id = “btn”> Click on the button to see toggleClass effect</button>
<p>Example for the toggleClass effect</p>
</body>
</html>

Example #2

<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“li”).toggleClass(function(n){
return “listitem_” + n;

</script>
<style>
p {
margin: 8px;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
}
.main {
background: yellow;
}
.listitem_1, .listitem_3,.listitem_5 {
color: blue;
}
.listitem_0, .listitem_2 ,.listitem_4{
color: pink;
}
</style>
</head>
<body>
<ul>
<h1>List of student names</h1>
<li><p class=”main”>Sai</p></li>
<li><p class=”main”>Bharat</p></li>
<li><p class=”main”>Vanitha</p></li>
<li><p class=”main”>Sony</p></li>
<li><p class=”main”>Anna Purna</p></li>
<li><p class=”main”>Vasavi</p></li>
</ul>
<script>
$( “p” ).click(function() {
$( this ).toggleClass( “main” );
});
</script>
<button>Click on the button for toggleClass effects</button>
</body>
</html>

Example #3

<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#add”).click(function(){
$(“p”).toggleClass(“highlight”,true);
});
$(“#remove”).click(function(){
$(“p”).toggleClass(“highlight”,false);

</script>
<style>
.highlight {
background-color: blue;
font-size: 200%;
color: white;
}
</style>
</head>
<body>
<p>ToggleClass effects explained by using example.</p>
<p class=”highlight”>Switch parameter to add or remove a class name.</p>
<button id=”add”>Add toggleClass</button>
<button id=”remove”>Remove toggleClass </button>
</body>
</html>

HTML Code:

<body>
<!– Code 1–>
<h2> <i> JQuery Modal Demo </i> </h2>
<!– Trigger The JQuery Modal Dialog Box –>
<button id=”modalBtn”>Click to open Modal Demo DialogBox</button>
<!– Our Modal Pop Up Box–>
<div id=”modalDemo” class=”jqModal”>
<!– Our Content for the Modal Dialog Box–>
<div class=”content”>
<span class=”exit”>&times;</span>
<p>Welcome to JQuery Modal Demo Text…</p>
</div>
</div>

<head>
<style>
body {font-family:Verdana, Geneva, sans-serif;}
/* CSS for The Modal Dialog Box(background) */
.jqModal {
display: none; /* By default, display will be hidden */
position: fixed; /* Position will be fixed */
z-index: 1; /* makes the modal box display on the top */
padding-top: 100px; /* Location of the modal box */
left: 0;
top: 0;
width: 100%; /* width 100%, resizable according to window size */
height: 100%; /* height 100%, resizable according to window size */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* color for the Fallback */
background-color: rgba(0,0,0,0.7); /* Opacity for the fallback */
}
/* CSS for Modal Dialog Content Text */
.content {
background-color:#FFF;
margin: auto;
padding: 20px;
border: 3px solid #809;
width: 80%;


/* CSS for Cross or exit or close Button */
.exit {
color: #809;
float: right;
font-size: 30px;
font-weight: bold;
}
.exit:hover,
.exit:focus {
color: #000;
cursor: pointer;
}
#modalBtn{
background-color: #4CAF50;
color: white;
padding: 12px 20px;
margin: 10px 0;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
</style>
</head>

Another Example – The Script

The last step is the main and important step. It is here where we will trigger the modal pop up and make it visible for the user. We will be attaining the following points through our script:

open the Modal Pop Up on command or when triggered.

To close or exit the Modal Pop Up when the user clicks the (x) button.

To position the Modal Pop Up in the center and stay centered even if the user changes or resizes his viewport.

Script Code:

<script>
// Set object for the modal
var myModal = document.getElementById(“modalDemo”);
// Set object for the button that will trigger the modal box
var myButton = document.getElementById(“modalBtn”);
// Set an element that will close the modal box
var exitBtn = document.getElementsByClassName(“exit”)[0];
// Allows display of modal box, when user clicks the button
myButton.onclick = function() {
myModal.style.display = “block”;
}
// Allows the user to close the modal box, when user will click on (x) button
exitBtn.onclick = function() {
myModal.style.display = “none”;
}
// Allows the user to close the modal box, even when the user clicks anywhere outside of the modal box
window.onclick = function(event) {
if (event.target == myModal) {
myModal.style.display = “none”;
}
}
</script>

Learn more about programming at mcp


  • Recent Posts



shares
Loading...