JQuery Click Event Toggle Show Hide DIV in Asp.Net C# VB.Net

The man who starts to learn Jquery, basically this post is for you. As a developer i knew that in most web applications we need to do the same job many times. Previously i have explained how one can display/show hide a div using Javascript. But recent days we were very familiar with Jquery & love to write Jquery method instead of Javascript. In this article i will basically show you how you can display show hide Div content using jquery. To do the example add a Link, when user click on Show/Hide Div link then the corresponding DIV will be displayed if its hidden & going to be hidden if its displayed.


Add Jquery Library just Under “MainContent”:

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

Add a Show Hide Link & DIV like below:

<a id="lnkShowHide" href=""  name="lnkShowHide">Show/Hide Div</a>
<div id="DIV1" style="border-style: solid;border-width: 2px;width:15%">
    <p>Some div content here
    Some div content here</p>

Add the Jquery Toggle Function Like Below:

<script type="text/javascript">
    $(document).ready(function () {

        $('a#lnkShowHide').click(function () {
            return false; /** not necessary if you add "#" into Achor href.**/


Note: Initially the script hid the DIV. If you don’t want than comment out “$(‘#DIV1’).hide();” line.

Now run the example. Hope you will get your desired output.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, JQuery, VB.Net

Leave a Reply

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