Manipulate addClass and removeClass using jQuery in Tamil

In jQuery, addClass() and removeClass() are methods used for dynamically manipulating the classes of HTML elements. These methods provide a convenient way to add or remove CSS classes to/from elements on a webpage, allowing for dynamic changes to the styling of those elements.

addClass() Method :

The addClass() method is used to add one or more classes to the selected elements.

$(selector).addClass(className1, className2, ...)

selector : A string containing a selector expression to match the elements against.
className1, className2, ... : One or more class names to be added to the elements.

removeClass() Method :

The removeClass() method is used to remove one or more classes from the selected elements.

$(selector).removeClass(className1, className2, ...)

selector : A string containing a selector expression to match the elements against.
className1, className2, ... : One or more class names to be removed from the elements.

Features

These methods are often used in response to user interactions, such as button clicks or other events.
You can add or remove multiple classes by separating them with spaces within a single addClass() or removeClass() call.
These methods are commonly used to create interactive and dynamic user interfaces, where the appearance of elements can change based on user actions.

Source Code

$('#b1').click(function(){...}); : This code sets up a click event handler for the button with the ID 'b1'. When this button is clicked, it adds the 'design' class to the <h3> element.
$('#b2').click(function(){...}); : This code sets up a click event handler for the button with the ID 'b2'. When this button is clicked, it removes the 'design' class from the <h3> element.
Initially, the heading "Tutor Joes" has the 'design' class applied, so it has a red color, a font size of 25px, and a specific font family.
Clicking the "Show" button (#b1) has no visible effect because the 'design' class is already applied.
Clicking the "Hide" button (#b2) removes the 'design' class from the <h3> element, resulting in the removal of the specific styling defined in the 'design' class.
Subsequent clicks on the "Show" and "Hide" buttons toggle the presence of the 'design' class, affecting the styling of the <h3> element dynamically.

<html>
	<head>
		<title>Add and Remove</title>
		<style>
			.design{
				   color:red; 
				   font-size: 25px;   
				   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;    
				}
		</style>
	</head>
	<body>
    <h3 class='design'>Tutor Joes</h3>
    <button id='b1'>Show</button>
    <button id='b2'>hide</button>
	<script src="js/jquery.js"></script>
		<script>
			$("document").ready(function(){
				$('#b1').click(function(){
					$('h3').addClass('design');
				});
				$('#b2').click(function(){
					$('h3').removeClass('design');
				});
			});
		</script>
	</body>
</html>

In summary, addClass() and removeClass() are powerful tools in jQuery for dynamically modifying the classes of HTML elements, allowing for flexible and responsive styling in web applications.