Subscribe
Please visit my new Web Site https://coderstechzone.com
In many cases developers need to show hide or toggle div container based on user requirement. Some of SEO specialists told that hiding a div is against SEO. But I want to tell that if your div appear with unchanged contents by user interaction then it’s ok for SEO. In many cases like you want to display a popup type window (which is basically a div) then you need to show or hide a div. Here in this javascript tutorial I will show you how one can manage show hide div based on user interaction.
There are two ways you can show hide a div:
1. By using CSS style.display property
2. By using CSS style.visibility property
1. By using CSS style.display property:
When you use style.display to control div appearance then in visible time it occupies its area but in hidden time it does not occupy the area. Look at below image.
Cross Browser Javascript Function / Method:
function Show_Hide_By_Display()
{
var div1 = document.getElementById("div1");
if(div1.style.display=="" || div1.style.display=="block")
{
div1.style.display = "none";
}
else
{
div1.style.display = "block";
}
return false;
}
2. By using CSS style.visibility property:
When you use style.visibility to control div appearance then in visible time it occupies its area as well as in hidden time also.
Cross-Browser Javascript Function / Method:
function Show_Hide_By_Visibility()
{
var div1 = document.getElementById("div1");
if(div1.style.visibility=="")
{
div1.style.visibility = "hidden";
}
else
{
div1.style.visibility = "";
}
return false;
}
So based on requirement use one of two javascript function to control the appearance of your div.
The complete source code is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Show_Hide_Div.aspx.cs" Inherits="Show_Hide_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 runat="server">
<title>Show Hide Div using Javascript</title>
<script type="text/javascript">
function Show_Hide_By_Display()
{
var div1 = document.getElementById("div1");
if(div1.style.display=="" || div1.style.display=="block")
{
div1.style.display = "none";
}
else
{
div1.style.display = "block";
}
return false;
}
function Show_Hide_By_Visibility()
{
var div1 = document.getElementById("div1");
if(div1.style.visibility=="")
{
div1.style.visibility = "hidden";
}
else
{
div1.style.visibility = "";
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="div1" style="border:2px;border-style:solid;border-color:Red;width:200px">
This is a DIV. We will toggle based on a Button Click
</div>
<asp:Button ID="cmd" runat="server" Text="Click to toggle a DIV" OnClientClick="return Show_Hide_By_Display()" />
</div>
</form>
</body>
</html>
Script tested for:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome
2 comments:
Keep the Both Thumbs Up!
OSC Website Templates
hi nice
I WOULD BE DELIGHTED TO HEAR FROM YOU