jQuery Toggle() Method

jquery toggle

jQuery Toggle() Method

How to do jquery Toggle() method to show/hide onclick

The jQuery toggle() method is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.

HTML :

<button type="button" id="toggle">Toggle</button>
	<div id="text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</div>

Specify a button with an id along with a div containg the text. Also specify an id for the div.

Include the jquery.min.js file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Click here to get the jquery.min.js file contents

jQuery

<script type="text/javascript">
	$(document).ready(function()
	{
		$( "#toggle" ).click(function() {     
		   $('#text').toggle();
		});
	});
</script>

In script take the click event, onclick the button specify toggle() function. The jQuery toggle() function is an inbuilt function so all we have to do is just specify the function.

For printing Date with javascript/jquery click here.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top