How do you make a frame that only shows on click?

**PBScott** · 12:10 AM

Hi I need help making a divider box hidden untill there is a request for it to be viewed.

I am selling some offensive shirts on my website now and I want to hide them unless the user clicks to see them. I would like to have this frame hidden with a hyperlink that they click on to expose the frame.

It is for this page, the bottom row if you want to have a look at it http://planetarybargains.com/Clothing.html

My frames are all defined in my css document.

I have done this with it accessing another webpage before, but I wonder if this is possible without doing that.

Thank you in advance.

**LadynRed** · 06-07-2009, 12:30 PM

Don't use frames. A lightbox-type solution would work, do a lookup for ThickBox, it'll display a lot more than images. I ran across a new one last week, called SexyLightbox2, but the author's site is down, you might be able to find a downloadable version of it somewhere else though.

**PBScott** · 12:12 AM

I had a look at the lightbox solution and its interesting, but i realized i made a mistake in how i worded the first question. I will try to word it better now, but I am not sure of my terminology.

I didnt mean frame, I ment a hidden divider box that you click on a hyperlink and its not hidden anymore.

It seems like this should be very easy to do, I just dont know how to do it.

**World** · 02:46 AM

Quote:

Originally Posted by LadynRed

Don't use frames. A lightbox-type solution would work, do a lookup for ThickBox, it'll display a lot more than images. I ran across a new one last week, called SexyLightbox2, but the author's site is down, you might be able to find a downloadable version of it somewhere else though.

This source says a lightbox doesn't work under IE 6. Is that right?

PS: Do you also frown upon the iFrame element? (I decided to keep it in my web page as it works - until I can write a javascript gallery).

**PBScott** · 06-08-2009, 12:19 PM

Thank you for your help everyone, you all pointed me in the right direction and i found a bit of code, thanks again.

**LadynRed** · 06-08-2009, 03:00 PM

Quote:

This source says a lightbox doesn't work under IE 6. Is that right?

Lightbox works under IE6, we use it on numerous sites.

**lowcostuk** · 06-11-2009, 05:57 AM

Hi Scott, try this code. you can customise it to suit your needs. Excuse the table, make sure you replace it with proper css...

<!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=iso-8859-1" />
<title>Your Website</title>
<script language="javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a href="javascript:showonlyone('newboxes1');" >collapse</a>
</div>
<div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a href="javascript:showonlyone('newboxes2');" >collapse</a>
</div>
<div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div
></td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a href="javascript:showonlyone('newboxes3');" >collapse</a>
</div>
<div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div
></td>
</tr>
</table>
</body>
</html>

**PBScott** · 01:39 AM

Hello This is the Code I ended up using, but then I decided not to hide the divider after all. It works though.

Short and sweet

Code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<a onclick="toggle_visibility('foo');"> <p align="left"  style="font-size:19px"><strong><br />
    <br />
    Click Here For The Hidden Divider Foo</strong><br />
<p>&nbsp; </p></a>



<div id="foo" style="display:none">   This Is Foo

</div>

Just paste whatever you would like to hide where "This is Foo" is at the bottom of the script.

**bdg1115** · 10-16-2009, 12:12 AM

I just figured this out myself. Here is what I did.

In head tags

Code:

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "See More";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>

Then in body:

Code:

 
<div id="toggleText" style="display: none;"> (your content)</div>
<a href="javascript:toggle();" id="displayText">See More</a>

Hope this works for you.

**JAUB** · 11-01-2009, 03:58 AM

Quote:

Originally Posted by bdg1115

I just figured this out myself. Here is what I did.

In head tags

Code:

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "See More";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>

Then in body:

Code:

 
<div id="toggleText" style="display: none;"> (your content)</div>
<a href="javascript:toggle();" id="displayText">See More</a>

Hope this works for you.

thats cool, thanks for that. what are you calling it? i saved it to my library as on demand revealer. surely you or someone else can come up with a better name for it than that.

-jaub