hide() and show() Effects in jQuery, jQuery hide() and show() Effects with Example

<!DOCTYPE html>
<html>
	<head>
    	<title>jQuery hide() and show() Effects</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#hide").click(function(){
					$("div").hide();
				});
				$("#show").click(function(){
					$("div").show();
				});
			});
		</script>
		<style type="text/css">
		.button{ padding:6px 15px; margin:5px 0px;}
		.box{ 
			width:300px; 
			height:auto; 
			padding:0px 10px; 
			font-style:italic; 
			border:1px solid #0099da; 
			border-radius:3px; 
			text-align:justify;
		}
		</style>
    </head>
    <body>
	
		<button id="hide" class="button">Hide</button>
		<button id="show" class="button">Show</button>
		<div class="box">
		<p>Dummy 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.</p>
		</div>
	
	</body>
</html>

Output :

Topic : hide() and show() Effects