Hello,
Our Advanced Search page has 50 searchable items/fields. We have it divided into 5 sections using html rows to divide each of the 5 sections.
We would like to use javascript to hide each section of the form so that when you click on a link like "SHOW SECTION", it will expand (Show) the section.
When you click on "HIDE SECTION", it would colapse (hide) that section of the form.
How would we do this?
Here is some example script we would put inside <HEAD></HEAD>:
{literal}
<script type="text/javascript">
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}
function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
}
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
}
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
function handleClick(whichClick) {
if (whichClick == "hide it") {
// then the user wants to hide the layer
hideLayer("boxthing");
}
else if (whichClick == "show it") {
// then the user wants to show the layer
showLayer("boxthing");
}
}
</script>
{/literal}
But we are having trouble getting these in the right place:
<a href="#" onclick="handleClick('hide it'); return false">Hide Layer</a>
<a href="#" onclick="handleClick('show it'); return false">Show Layer</a>
<div id="boxthing"><p>Use the links above to show and hide this layer.<p></div>
Thanks & Happy New Year!
Wengen
