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

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() {



About author

User avatar

Waqas Anwar

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