HTML/Script - drop-down FAQ menu

sheepondrugs · Aug 8, 2009

Hi guys!,

I've been trying all day to get this FAQ menu working.

Unfortunately and very grudgingly I admit defeat.

Im trying to hide all 3 answers (variables).

but i can only manage to hide 1.

I Could just copy and edit :

Code:

document.getElementById("myvar1").style.display='none';

but if there is more of a professional way, id rather use that.

..also feel free to tweak/edit away. I'm still learning :wave

Code:

<!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>


<title>Switch menu</title>
<style type="text/css">
<!--
body {
text-align:center;
margin:30px;
}
#wrapper {
text-align:left;
margin:0 auto;
width:200px;
min-height:100px;
border:1px solid #ccc;
padding:10px;
}
a {
color:blue;
cursor:pointer;
}
#myvar1, #myvar2, #myvar3  {
border:1px solid #ccc;
background:#f2f2f2;
padding:20px;

}
-->
</style>


<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

function hide(){
document.getElementById("myvar1").style.display='none';

}
//-->
</script>

</head><body>

<div id="wrapper">
<a onclick="switchMenu('myvar1');" title="Test1">Question 1</a><br><div id="myvar1">Answer to your question is 1.</div>
<a onclick="switchMenu('myvar2');" title="Test2">Question 2</a><br><div id="myvar2">Answer to your question is 2</div>
<a onclick="switchMenu('myvar3');" title="Test3">Question 3</a><br><div id="myvar3">Answer to your question is 3.</div>
</div>


<body onload="hide();">

</html>

Many Thanks!,

Chris

Log in or Sign up

HTML/Script - drop-down FAQ menu

sheepondrugs Private First Class

Log in or Sign up

HTML/Script - drop-down FAQ menu

sheepondrugs Private First Class

Useful Searches