How to Show/Hide Elements using JQuery Toggle function


You want to show/hide any HTML element using JQuery, you can use JQuery toggle function as shown in the following example:

Let's say you have a div element which you want to show/hide on button click.

<input type="button" id="btnShowHide" value="Show/Hide" onclick="ShowHide();" />
    
<div id="message">
   Hello World
</div>

You can use JQuery toggle function like this:

<script src="jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">

   function ShowHide() {
      $("#message").toggle();
   }
        
</script>

 

 

About author


User avatar

Waqas Anwar

Founder of EzzyLearning.com, Senior Consultant, Microsoft .NET and Web Technologies

Comments 2

user
veena
  • 02 December 2010

this code is not working on aspx page

Waqas Anwar
Waqas Anwar
  • 02 December 2010

This code works in PHP, JSP, ASP, HTML and ASP.NET all. You just make sure you have JQuery file included in your file as shown in the code. Its better if you tell what is the error and what do you mean that this code is not working. Are you getting error?

Add Comment