jQuery .toggleClass() Method Examples

When dealing with classes in jQuery, it might be desirable to shorten the amount of code used to add class to an element or remove class from an element (Div, Image, Textbox, etc.). This can be easily achieved by using the toggleClass method. In this article, I am going to share very easy ways to use the jQuery toggleClass method by means of easy to follow examples.

How to use jQuery toggleClass method to dynamically add/remove CSS

Let’s assume that we have few different elements on our web page, such as Div, Image, Textbox, Textarea, Select DropDown list, Hyperlinks, Buttons, etc. Although the procedure to toggle class for all the elements is same, we will see how to toggle class for as many elements as possible. So here we go:

Common HTML Source code for all the following examples:

<style type="text/css">
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.orange {
	border: 10px solid #F90;
	color: #F60;
	font-size: 200%;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
.squeeze {
	width: 250px;
	height: auto;
	padding: 10px;
}
</style>

<div class="divs_container">

	<div id="my_div1" class="orange">This is MY DIV 1</div>

    <p>	
		<input type="submit" name="sbt_toggle_div_class" id="sbt_toggle_div_class" value="Toggle Div class">
	</p>

    <p><br>

      <img src="images/money.jpg" class="img" />

    <p>	
		<input type="submit" name="sbt_toggle_img_class" id="sbt_toggle_img_class" value="Toggle Image class">
	</p>      

	<p>

      <label for="first_name">First Name</label>
      <input type="text" name="first_name" id="first_name">

	<p>	
		<input type="submit" name="sbt_toggle_textbox_class" id="sbt_toggle_textbox_class" value="Toggle Textbox class">
	</p>

    </p>
    <p>
      <label for="message">Message<br>
      </label>
      <textarea name="message" id="message" cols="45" rows="5"></textarea>

    <p>	
		<input type="submit" name="sbt_toggle_textarea_class" id="sbt_toggle_textarea_class" value="Toggle Textarea class">
	</p>

    </p>
    <p>
      <label for="states">States</label>
      <select name="states" id="states">
        <option value="TX" selected="selected">TX</option>
        <option value="AL">AL</option>
        <option value="CA">CA</option>
      </select>

    <p>	
		<input type="submit" name="sbt_toggle_dropdown_class" id="sbt_toggle_dropdown_class" value="Toggle Select Dropdown class">
	</p>

    </p>
    <p><a href="#" class="link">This is a hyperlink</a>
	<p>	
		<input type="submit" name="sbt_toggle_hyperlink_class" id="sbt_toggle_hyperlink_class" value="Toggle Hyperlink class">
	</p>

    </p>
    <p>
      <input type="submit" name="sbt_demo_btn" id="sbt_demo_btn" value="I a Button. Click ME!">

    <p>	
		<input type="submit" name="sbt_toggle_button_class" id="sbt_toggle_button_class" value="Toggle Button class">
	</p>

	<div id="my_div2" class="orange">This is MY DIV 2. Toggle this Div and animate it.</div>

    <p>	
	  <input type="submit" name="sbt_toggle_div_class_animate" id="sbt_toggle_div_class_animate" value="Toggle Div class and Animate">
	</p>

   <p> <strong>NOTE:</strong> In order for the animation to work and show properly, you will have to include the jQuery UI library.</p>

</div>

Example 1: Toggling the class of a Div using Div ID when a button is clicked

	$('#sbt_toggle_div_class').on("click", function(e){		

		$('#my_div1').toggleClass('green');

		e.preventDefault();

	});

Example 2: Toggling the class of an Image using Image Class when a button is clicked

	$('#sbt_toggle_img_class').on("click", function(e){		

		$('.img').toggleClass('green');

		e.preventDefault();

	});

Example 3: Toggling the class of a Textbox using Textbox ID when a button is clicked

	$('#sbt_toggle_textbox_class').on("click", function(e){				

		$('#first_name').toggleClass('green');

		e.preventDefault();

	});

Example 4: Toggling the class of a Textarea using Textarea ID when a button is clicked

	$('#sbt_toggle_textarea_class').on("click", function(e){		

		$('#message').toggleClass('green');

		e.preventDefault();

	});

Example 5: Toggling the class of a Select Drop Down using the Dropdown ID when a button is clicked

	$('#sbt_toggle_dropdown_class').on("click", function(e){		

		$('#states').toggleClass('green');

		e.preventDefault();

	});

Example 6: Toggling the class of a Hyperlink using the link class when a button is clicked

	$('#sbt_toggle_hyperlink_class').on("click", function(e){				

		$('.link').toggleClass('green');

		e.preventDefault();

	});

Example 7: Toggling the class of a Button using the Button ID when a button is clicked

	$('#sbt_toggle_button_class').on("click", function(e){						
		$('#sbt_demo_btn').toggleClass('green');

		e.preventDefault();

	});

Example 8: Toggling the class of a div and animate it using Div ID when a button is clicked

	$('#sbt_toggle_div_class_animate').on("click", function(e){		
		$('#my_div2').toggleClass('squeeze', 'slow' );

		e.preventDefault();

	});

NOTE: In order for you to be able to see the div animate in the above example, you will need to include the jQuery UI Library. Unless you include it, you will miss out on the animation part. So grab the jQuery UI Library here.

That’s it!

Do you know of any other ways to use the jQuery toggleClass method? Feel free to suggest by commenting below.