OK the other day when I suggested using dropdown boxes or using divs I didn't actually have time to look up actual examples. I just looked up something a little while ago that needed to use hidden divs also. Since I brought up the idea earlier in this thread I thought I'd come back here and post the type of code I was talking about.
Code:
<html>
<head>
<title>Use a div to include hidden text</title>
<style type="text/css">
#HiddenDiv
{
visibility:hidden;
}
</style>
</head>
<body>
<p>There is a hidden div on this page with more text. You need to view the page source to see it.<p>
<div id="HiddenDiv">
<h1>Title for our Hidden Text</h1>
<p>Your Hidden Text Goes Here</p>
<p>We are so slick we made a hidden div layer</p>
</div>
</body>
</html>
Hiding text in this manner will probably be considered the same as if you tried using white text on a white background, 0 pixel size or any other tricks for hiding text. It wouldn't be difficult for the crawlers to determine there isn't any way for a visitor to view the hidden text.
It would be better if you include a way for the visitors to actually see the text if they want. This type of div has many legitimate uses so, if you do that then the crawler might see it as legitimate text for your page.
Code:
<html>
<head>
<title>Show Hide text in div</title>
<script type="text/javascript">
<!--
function ShowHide(id, visibility) {
obj = document.getElementsByTagName("div");
obj[id].style.visibility = visibility;
}
//-->
</script>
<style type="text/css">
<!--
#HiddenDiv
{
visibility:hidden;
width:200px;
height:200px;
position:absolute;
left:200px;
top:50px;
background-color: #FFFFFF;
border:1px solid #000000;
}
-->
</style>
</head>
<body>
<div id="HiddenDiv">
<h1>Title for our Hidden Text</h1>
<p>Your Hidden Text Goes Here</p>
<p>We are so slick we made a hidden div layer</p>
</div>
--------------------
<p>Use the following hrefs if you want to have Turn On and Turn Off links</p>
<p>
<a href="javascript:ShowHide('HiddenDiv','visible')">show text</a> |
<a href="javascript:ShowHide('HiddenDiv','hidden')">hide text</a>
</p>
--------------------
<p>Use the following href if you prefer it to show on mouse over instead</p>
<p>
<a href="javascript:ShowHide('HiddenDiv','visible')"
onmouseover="ShowHide('HiddenDiv','visible')"
onmouseout="ShowHide('HiddenDiv','hidden')">
Show Text Link
</a>
</p>
--------------------
</body>
</html>
That code will let you include links to turn the text box on, links to turn the text box off. links that will turn the box on and off on mouseover.
If you would rather just have a single link that will turn the text box on or off each time it's clicked you can use this code instead.
Code:
<html>
<head>
<title>Toggle HiddenText in div</title>
<script type="text/javascript">
<!--
function ToggleText(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible'){
obj[id].style.visibility = 'hidden';
}
else {
obj[id].style.visibility = 'visible';
}
}
//-->
</script>
<style type="text/css">
<!--
#HiddenDiv1
{
visibility:hidden;
width:200px;
height:200px;
position:absolute;
left:200px;
top:50px;
background-color: #FFFFFF;
border:1px solid #000000;
}
#HiddenDiv2
{
visibility:hidden;
width:200px;
height:200px;
position:absolute;
left:400px;
top:50px;
background-color: #FFFFFF;
border:1px solid #000000;
}
-->
</style>
</head>
<body>
<div id="HiddenDiv1">
<h1>Block 1 Title</h1>
<p>Here is one block of hidden text.</p>
</div>
<div id="HiddenDiv2">
<h1>Block 2 Title</h1>
<p>Here is another block of hidden text.</p>
</div>
<p>This web page has hidden divs</p>
<p>Click the links to toggle the hidden text</p>
<p><a href="javascript:ToggleText('HiddenDiv1')">Hidden Block 1</a></p>
<p><a href="javascript:ToggleText('HiddenDiv2')">Hidden Block 2</a></p>
</body>
</html>
Just change the parameters for the divs if you want a bigger or smaller box or to change the location, colors, etc. Each one of these is a complete html page, so if you want to see how the links actually work to show the hidden text box just copy them into notepad and save as html files, then load the page. This is really pretty simple pages so most html coders probably already know how, but for those who don't it might help some. :cool2:
@mrxinbollywood - I hope this helps out a little for what you were thinking about.
I don't know how well the text in hidden divs will work for SEO of your page, but I'm pretty sure these ideas would work better than using a 0 font size or similar trick to hide the text.
The cool thing about using the divs is that you can use h1 tags and other formatting to make the hidden text even better, and you can add as much text as you want. You can actually put a huge amount of content on a small page with this method. It's also great for photo sites because you can just use the photos as the anchors and use the text box for the photo descriptions.
You can probably figure out other uses for these type of text boxes also. I would recommend that if you use this kind of text box you change the div id to something besides HiddenDiv. I just used that to make it obvious for these examples. :smokin:
