Introduction : In this artical explain how to hide and show the div using the jquery script. with the use of css property like style display:none we can hide div and show using jquery script.
Step 1 : Create hidden div with id and style with display none.
<div id="D1" style="display: none; background-color: #eeeeee; width: 250px;">
div element here.
<br />
see div element here
Step 2 : Now write the Jquery to call the show funtion
function Show_Dv(D_id) {
if (false == $(D_id).is(':visible')) {
$(Div_id).show(200);
}
else {
$(D_id).hide(200);
}
}Step :3 Now Create html element and add the script code
<html>
<head>
<title>jQuery </title>
<script type="text/javascript" src="/jquery-1.4.2.js"></script>
<script type="text/javascript">
function Show_Div(D_id) {
if (false == $(D_id).is(':visible')) {
$(D_id).show(200);
}
else {
$(D_id).hide(200);
}
}
</script>
</head>
<body>
<br />
<input type="button" value="show or hidden div here" onclick="Show_Dv(D_1)" />
<br />
<br />
<div id="Div_1" style="display: none; background-color: #eeeeee; width: 250px;">
div element here.
<br />
see div element here
</div>
</body>
</html>
Step: 4 Now Run abov code and see output
Sign up here with your email
1 comments:
Write commentsnice very working coding
Replythnks to dotnetcode2u.com
ConversionConversion EmoticonEmoticon