Click here to Skip to main content
15,877,967 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi friends,

I am new to Jquery, I have a requirement of on click of a button the panel has to display and again if i click on the same button it has to hide.
I am able to display the panel on click , but now i want to hide the panel again by clicking on the same button.
Posted
Comments
Can you just post the codes?
I will try to do that with your existing codes.

If you want to show and hide the panel on the same button, then you need toggle the panel.
Code will be like below.

HTML
XML
<div id='panel'>[Put your content here]</div>
<input type="button" id='click' value="show/hide" />

CSS
CSS
#panel
{
     height: 200px;
     width: 200px;
     background: #E88C37;
     float: left;
     display: none;
     font-size: xx-large;
}

Javascript
JavaScript
$('#click').click(function()
{   
    $("#panel").toggle();     
});


Have a look at the Live Demo[^].

Thanks...
 
Share this answer
 
XML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
 
Share this answer
 
Comments
Rockstar_ 19-Dec-12 4:14am    
No dear, There is only One button...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900