Hide Show Div Using JQuery Asp.Net

Posted by Vijay Meghwal

Show Hide Div Using JQuery Example In Asp.Net. So many times while developing Asp.Net web application we need to show or hide div or other html elements based on user interaction as shown in picture.
we can do this with ease using JQuery

First of all we need to add reference to jquery in head section of page.

Add Reference in HTML Source

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Write some CSS for div and button

---

01.button, .button:visited {

02 background: #222;

03 display: inline-block;

04 padding: 5px 10px 6px;

05 color: #fff;

06 text-decoration: none;

07 -moz-border-radius: 6px;

08 -webkit-border-radius: 6px;

09 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

10 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

11 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

12 border-bottom: 1px solid rgba(0,0,0,0.25);

13 font-size: 11px;font-weight: bold;line-height: 1;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

14        background-color: #2981e4;

15        top:250px;

16        float:left;

17        left:150px;

18        position:fixed;

19 

20}

21.button:hover {background-color: #2575cf;}

22 

23.detailDiv {

24 height:80px;

25        width: 400px;

26 background: #222;

27 display: inline-block;

28 padding: 50px 10px 6px;

29 color: #fff;

30 text-decoration: none;

31 -moz-border-radius: 6px;

32 -webkit-border-radius: 6px;

33 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

34 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

35 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

36 border-bottom: 1px solid rgba(0,0,0,0.25);

37 position: relative;

38 cursor: pointer

39        font-size: 11px;font-weight: bold;line-height: 1;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

40        background-color: #91bd09;

41 text-align:center;

42}

43.detailDiv:hover {background-color: #749a02;}

Write following html code to hide or show div

---

<div class="detailDiv">
This is example of Hide show div element using jquery 
</div>

<button class="button">Show or Hide div </button>

Now we will be showing or hiding the div on click of button so we need to add click event listener in jquery function as follows.

01<script type="text/javascript">

02 

03$(document).ready(function(){

04 

05        $(".detailDiv").hide();

06        $('.button').click(function(){

07 $(".detailDiv").slideToggle();

08 });

09 

10});

11 

12</script>

And result will be like one in demo below, Click on button to see it live.

Have fun with JQuery