Show / Hide Div on Button Click using jquery

show and hide div on click suing jquery
show and hide div on click suing jquery
show and hide div on click suing jquery

Hello Friend Today in this article we will learn how to create show and hide div on button click using jquery. first of all we have to add jquery js file in our head section after that we will call the classes. Add This File in Your Head Section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script type="text/javascript">
	 $(document).ready(function(){
	   $("#mybt").click(function(){
		 $("#divShowHide").toggle();
	  });
    });
  </script> 
<style type="text/css">
    #mybt
	{
		width:80px;
		border:none;
		color:#fff;
		cursor:pointer;
		font-size:14px;
		height:30px;
		background:#f60;
	}
	
	#divShowHide
	{
		border:1px dashed #ccc;
		width:300px;
		background:#f2f2f2;
		height:auto;
		padding:10px;
	}
  </style>
 <h1>jQuery - Show/Hide Div on Button Click using jQuery.</h1>
     <p><input type="button" value="Show/Hide" id="mybt"/></p>
	 <div id="divShowHide">
	   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.
     </div>

We can add effect like slide, fade,etc. Add this jquery

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

Leave a Reply

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