Hide Show Div Using JQuery Asp.Net

Show hide div using jquery example in asp.net.

So many times while developing 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.





for this first of all we need to add jquery in head section of page.

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

Now write some css for the div and show hide 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 this html code to hide or show the 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>

Have fun with JQuery