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.
Write some CSS for div and button
Write following html code to hide or show div
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.
Have fun with JQuery
we can do this with ease using JQuery
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:
Hi in css its giving error display:inline-block; is not an element attribute of css
This comment has been removed by a blog administrator.
aaa
Post a Comment