Forum Moderators: open
This is the only thing that should show when the page initially loads. Basic layout is:
Category1 -- Category2 -- Category3
When you click on a category, a Selection pops up/ these selections are inside named according to the category. So if Category1 was selected, the selections would be named Category1_Selection1, Category1_Selection2, etc.
Selection1 -- Selection2 -- Selection3 -- Selection4
After choosing a selection, all information relative to the category and selection pop up below.
The Selections are currently toggling fine. If I try to do the same thing with the Categories, they will also toggle the selections off. Is there a way around this?
Here's the basic toggler. Sweeten according to taste.If you want more than one set on a page, we need to amend it (but only slightly).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>TEST</title>
<style type="text/css">
.text{display: none;width:300px;border: solid 1px lightblue;}
#text0{display: block;}
</style>
<script type="text/javascript">
/*
Global "swap" holder
Use value, null, if no layer initially visible
*/
var currLayerId = "text0";function toglayer(id)
{
if(currLayerId) setDisplay(currLayerId, "none");
if(id)setDisplay(id, "block");
currLayerId = id;
}function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>
</head>
<body>
<!--buttons-->
<a href="#" onclick="toglayer('text0');return false;">text0</a>
<a href="#" onclick="toglayer('text1');return false;">text1</a>
<a href="#" onclick="toglayer('text2');return false;">text2</a>
<a href="#" onclick="toglayer(null)">Show none</a>
<!--layers-->
<div id="text0" class="text">Content of text0</div>
<div id="text1" class="text">Content of text1</div>
<div id="text2" class="text">Content of text2</div>
</body>
</html>
I feel smart...woot.
var currLayerIdtwo = "";function togLayertwo(idtwo)
{
if(currLayerIdtwo) setDisplaytwo(currLayerIdtwo, "none");
if(idtwo)setDisplaytwo(idtwo, "block");
currLayerIdtwo = idtwo;
}function setDisplaytwo(idtwo,valuetwo)
{
var elm = document.getElementById(idtwo);
elm.style.display = valuetwo;
}function hideDisplay(id)
{
if(id)setDisplay(id, "none");
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>TEST</title>
<style type="text/css">
.text{display: none;width:300px;border: solid 1px lightblue;}
#text0{display: block;}
</style>
<script type="text/javascript">
/*
Global "swap" holder
Use value, null, if no layer initially visible
*/
var currLayerId = ["text0", "other0"];
function toglayer(id,n)
{
if(currLayerId) setDisplay(currLayerId[n], "none");
if(id)setDisplay(id, "block");
currLayerId[n] = id;
}
function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>
</head>
<body>
<!--buttons-->
<a href="#" onclick="toglayer('text0',0);return false;">text0</a>
<a href="#" onclick="toglayer('text1',0);return false;">text1</a>
<a href="#" onclick="toglayer('text2',0);return false;">text2</a>
<a href="#" onclick="toglayer(null,0)">Show none</a>
<!--layers-->
<div id="text0" class="text">Content of text0</div>
<div id="text1" class="text">Content of text1</div>
<div id="text2" class="text">Content of text2</div>
</body>
</html>
