Show and Hide div by javaScript
Show and Hide div by javaScript:
Show and hide div by javaScript is very
easy, in web Development many time user want to use this type of concept. Some
time we need hide one div and display second and then second hide, display
first.
Show and Hide div by javaScript,
For Example In facebook home page we see
update status and upload photo some time but when we click on upload photo then
one div show and when click on update status then another div show. Here we
give a small segment of code for understanding this concept. I think this is Useful
for you.
Code for hide/show div
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript hide table row</title>
<script>
function show() {
if (document.getElementById('photo').style.display
== 'none') {
document.getElementById('photo').style.display
= 'block';
document.getElementById('status').style.display
= 'none';
}
return false;
}
function hide() {
if
(document.getElementById('photo').style.display
== 'block') {
document.getElementById('photo').style.display
= 'none';
document.getElementById('status').style.display
= 'block';
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="opener"><a href="#" name="1" onclick="return show();">Photo</a></div>
<div id="upbutton"><a href="#" onclick="return hide();">Status</a>
<div id="photo" style="display:none;">
<asp:TextBox ID="TxtStatus"
runat="server"></asp:TextBox>
</div>
<div id="status" style="display:block;">status
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</div>
</form>
</body>
</html>
Here we consider a Asp.net page in which we take two div:
<div id="photo" style="display:none;">
<asp:TextBox ID="TxtStatus"
runat="server"></asp:TextBox>
</div>
<div id="status" style="display:block;">status
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
And javaScript function is :
<script>
function show() {
if (document.getElementById('photo').style.display
== 'none') {
document.getElementById('photo').style.display
= 'block';
document.getElementById('status').style.display
= 'none';
}
return false;
}
function hide() {
if
(document.getElementById('photo').style.display
== 'block') {
document.getElementById('photo').style.display
= 'none';
document.getElementById('status').style.display
= 'block';
}
return false;
}
</script>
