Hide Show Div Using JQuery Asp.Net

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
Show or Hide Div using jquery
First of all we need to add reference to jquery in head section of page.

Add Reference in HTML Source






Write some CSS for div and button
.button, .button:visited {
 background: #222;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 font-size: 11px;font-weight: bold;line-height: 1;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        background-color: #2981e4;
        top:250px;
        float:left;
        left:150px;
        position:fixed;
        
}
.button:hover {background-color: #2575cf;}

.detailDiv {
 height:80px;
        width: 400px;
 background: #222;
 display: inline-block;
 padding: 50px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer
        font-size: 11px;font-weight: bold;line-height: 1;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        background-color: #91bd09;
 text-align:center;
}
.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.



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


This is example of Hide show div element using jquery






Have fun with JQuery

If you like this post than join us or share

3 comments:

Anonymous said...

Hi in css its giving error display:inline-block; is not an element attribute of css


Asho said...

This comment has been removed by a blog administrator.


Anonymous said...

aaa


Find More Articles