PDA

View Full Version : Help? Simple nav hide/show problem?



theglengold
12-03-2010, 12:28 AM
I'm trying to make the subnav disappear when you click on any other menu link. Right now they only disappear when you click on the parent main menu link. I'm very new to this and have a big mess of Frankenstein code! Can anyone help?
Thanks!
Wendy




<head>

<style type="text/css">
<!--

body {
text-align:right;
/*sets position of entire box*/
margin:50px 0 0 0;
font-family: Trebuchet MS;
}

#wrapper {
text-align:right;
margin:0 0 0 0;
/*sets width of entire box*/
width:350px;
/*sets height of each menu box- used to say min-height:22px;*/
height:200px;
border:1px solid #ccc;
padding:0 0 0 0;
}

a {
color:black;
cursor:pointer;
text-decoration: none;
}

#myvar {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar2 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar3 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar4 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar5 {
position:absolute;
border:none;
background:none;
padding:0;
top:121px;
left:40px;
}

-->
</style>


<script type="text/javascript">
<!--
function hide() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('myvar').style.display = 'block';
document.getElementById('myvar2').style.display = 'none';
document.getElementById('myvar3').style.display = 'none';
document.getElementById('myvar4').style.display = 'none';
document.getElementById('myvar5').style.display = 'none';
document.getElementById('twentyfourtotwentysix').style.display = 'none';
document.getElementById('linkstable').style.display = 'block';
document.getElementById('linkstable').style.visible = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.myvar.display = 'block';
document.myvar2.display = 'none';
document.myvar3.display = 'none';
document.myvar4.display = 'none';
document.myvar5.display = 'none';
document.twentyfourtotwentysix.display = 'none';
}
else { // IE 4
document.all.myvar.style.display = 'block';
document.all.myvar2.style.display = 'none';
document.all.myvar3.style.display = 'none';
document.all.myvar4.style.display = 'none';
document.all.myvar5.style.display = 'none';
document.all.linkstable.style.display = 'block';
document.all.linkstable.style.visibility = 'visible';
document.all.twentyfourtotwentysix.style.display = 'none';
}
}
}

function hideshow(section) {
var el = document.getElementById(section);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>

</head>

<body>

<div class="container">
<div class="content">

<div id="wrapper">
<p><a onclick="hide('linkstable');">HOME</a></p>
<div id="myvar" style="display:none;">
</div>

<p><a onclick="hide('linkstable');">GALLERY</a></p>
<div id="myvar2" style="display:none;">
</div>

<p><a onclick="hideshow('myvar3');">APPLICATIONS</a></p>
<div id="myvar3" style="display:none;">
<p><a href="blah">MURALS</a></p>
<p><a href="blah">KITCHEN & VANITY</a></p>
<p><a href="blah">FURNITURE</a></p>
<p><a href="blah">STONE & FINISHES</a></p>
</div>

<p><a onclick="hideshow('myvar4');">ORIGINS</a></p>
<div id="myvar4" style="display:none;">
<p><a href="blah">FOSSIL PREPARATION</a></p>
<p><a href="blah">QUARRY INFORMATION</a></p>
<p><a href="blah">FOSSIL HISTORY</a></p>
<p><a href="blah">SPECIES INFORMATION</a></p>
</div>

<p><a onclick="hideshow('myvar5');">ABOUT</a></p>
<div id="myvar5" style="display:none;">
<p><a href="blah">BIO</a></p>
<p><a href="blah">AFFILIATIONS</a></p>
<p><a href="blah">CONTACT US</a></p>
</div>

</div>
</body>
</html>
<!-- end .content --></div>
<!-- end .container --></div>

vwphillips
12-03-2010, 10:53 AM
<!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" xml:lang="en" lang="en">

<head>

<style type="text/css">
<!--

body {
text-align:right;
/*sets position of entire box*/
margin:50px 0 0 0;
font-family: Trebuchet MS;
}

#wrapper {
text-align:right;
margin:0 0 0 0;
/*sets width of entire box*/
width:350px;
/*sets height of each menu box- used to say min-height:22px;*/
height:200px;
border:1px solid #ccc;
padding:0 0 0 0;
}

a {
color:black;
cursor:pointer;
text-decoration: none;
}

#myvar {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar2 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar3 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar4 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar5 {
position:absolute;
border:none;
background:none;
padding:0;
top:121px;
left:40px;
}

-->
</style>


<script type="text/javascript">
<!--
function hide() {
document.getElementById('myvar').style.display = 'block';
document.getElementById('myvar2').style.display = 'none';
document.getElementById('myvar3').style.display = 'none';
document.getElementById('myvar4').style.display = 'none';
document.getElementById('myvar5').style.display = 'none';
document.getElementById('twentyfourtotwentysix').style.display = 'none';
document.getElementById('linkstable').style.display = 'block';
document.getElementById('linkstable').style.visible = 'visible';
}

function hideshow(section) {
var el = document.getElementById(section);
if (hideshow.lst&&hideshow.lst!=el){
hideshow.lst.style.display ='none';
}
el.style.display =el.style.display != 'none'?'none':'';
hideshow.lst=el;
}
//-->
</script>

</head>

<body>

<div class="container">
<div class="content">

<div id="wrapper">
<p><a onclick="hide('linkstable');">HOME</a></p>
<div id="myvar" style="display:none;">
</div>

<p><a onclick="hide('linkstable');">GALLERY</a></p>
<div id="myvar2" style="display:none;">
</div>

<p><a onclick="hideshow('myvar3');">APPLICATIONS</a></p>
<div id="myvar3" style="display:none;">
<p><a href="blah">MURALS</a></p>
<p><a href="blah">KITCHEN & VANITY</a></p>
<p><a href="blah">FURNITURE</a></p>
<p><a href="blah">STONE & FINISHES</a></p>
</div>

<p><a onclick="hideshow('myvar4');">ORIGINS</a></p>
<div id="myvar4" style="display:none;">
<p><a href="blah">FOSSIL PREPARATION</a></p>
<p><a href="blah">QUARRY INFORMATION</a></p>
<p><a href="blah">FOSSIL HISTORY</a></p>
<p><a href="blah">SPECIES INFORMATION</a></p>
</div>

<p><a onclick="hideshow('myvar5');">ABOUT</a></p>
<div id="myvar5" style="display:none;">
<p><a href="blah">BIO</a></p>
<p><a href="blah">AFFILIATIONS</a></p>
<p><a href="blah">CONTACT US</a></p>
</div>

</div>
</body>
</html>

theglengold
12-03-2010, 05:05 PM
You have no idea how much you've made my day!!

thebigkahuna
03-22-2011, 03:02 PM
<!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" xml:lang="en" lang="en">

<head>

<style type="text/css">
<!--

body {
text-align:right;
/*sets position of entire box*/
margin:50px 0 0 0;
font-family: Trebuchet MS;
}

#wrapper {
text-align:right;
margin:0 0 0 0;
/*sets width of entire box*/
width:350px;
/*sets height of each menu box- used to say min-height:22px;*/
height:200px;
border:1px solid #ccc;
padding:0 0 0 0;
}

a {
color:black;
cursor:pointer;
text-decoration: none;
}

#myvar {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar2 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar3 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar4 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar5 {
position:absolute;
border:none;
background:none;
padding:0;
top:121px;
left:40px;
}

-->
</style>


<script type="text/javascript">
<!--
function hide() {
document.getElementById('myvar').style.display = 'block';
document.getElementById('myvar2').style.display = 'none';
document.getElementById('myvar3').style.display = 'none';
document.getElementById('myvar4').style.display = 'none';
document.getElementById('myvar5').style.display = 'none';
document.getElementById('twentyfourtotwentysix').style.display = 'none';
document.getElementById('linkstable').style.display = 'block';
document.getElementById('linkstable').style.visible = 'visible';
}

function hideshow(section) {
var el = document.getElementById(section);
if (hideshow.lst&&hideshow.lst!=el){
hideshow.lst.style.display ='none';
}
el.style.display =el.style.display != 'none'?'none':'';
hideshow.lst=el;
}
//-->
</script>

</head>

<body>

<div class="container">
<div class="content">

<div id="wrapper">
<p><a onclick="hide('linkstable');">HOME</a></p>
<div id="myvar" style="display:none;">
</div>

<p><a onclick="hide('linkstable');">GALLERY</a></p>
<div id="myvar2" style="display:none;">
</div>

<p><a onclick="hideshow('myvar3');">APPLICATIONS</a></p>
<div id="myvar3" style="display:none;">
<p><a href="blah">MURALS</a></p>
<p><a href="blah">KITCHEN & VANITY</a></p>
<p><a href="blah">FURNITURE</a></p>
<p><a href="blah">STONE & FINISHES</a></p>
</div>

<p><a onclick="hideshow('myvar4');">ORIGINS</a></p>
<div id="myvar4" style="display:none;">
<p><a href="blah">FOSSIL PREPARATION</a></p>
<p><a href="blah">QUARRY INFORMATION</a></p>
<p><a href="blah">FOSSIL HISTORY</a></p>
<p><a href="blah">SPECIES INFORMATION</a></p>
</div>

<p><a onclick="hideshow('myvar5');">ABOUT</a></p>
<div id="myvar5" style="display:none;">
<p><a href="blah">BIO</a></p>
<p><a href="blah">AFFILIATIONS</a></p>
<p><a href="blah">CONTACT US</a></p>
</div>

</div>
</body>
</html>


VWPHILLIPS,

Thanks for this code. What if we wanted one of the sections to be expanded when the page loads? I want one displayed when the page loads and the other hidden, but when you click either of them, the other closes. Some of the code is below. Thanks.


<div id="wrapper">
<div><a onclick="hideshow('myvar');"><img src="images/GR_header.gif" width="824px" height="24px"></a></div>
<div id="myvar">
<table width="75%" border="0" align="center">
<tr>
<td width="52%">&nbsp;</td>
<td width="48%">&nbsp;</td>
</tr>
<tr>
<td height="34" colspan="2"><div align="center">
<table width="75%" border="1">
<form name="formSearch" method="POST" action="findRides.php">
<tr>
<td><div align="right">Destination</div></td>
<td>
<input type="text" name="destAddr" id = "destAddr">
</td>
</tr>
<tr>
<td><div align="right">Departure</div></td>
<td>
<input type="text" name="deptAddr" id = "deptAddr">
</td>
</tr>
<tr>
<td><div align="right">Time</div></td>
<td>
<input type="text" name="time" id = "time">
</td>
</tr>
<tr>
<td><div align="right">Date</div></td>
<td width="45%"><input type="text" name="deptDate" readonly = "true" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'formSearch',
// input name
'controlname': 'deptDate'
});

</script> <div align="left"> </div></td></tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="Submit" value="Search Rides">
</form></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center"></div></td>
</tr>
<tr>
<td colspan="2"><div align="center"></div></td>
</tr>
</table>
</div>

<br />
<div><a onclick="hideshow('myvar2'); map.checkResize(); map.setCenter(new GLatLng(38.980571,-76.485906),12);"><img src="images/CR_header.gif" width="824px" height="24px"></a></div>
<div id="myvar2" style="display:none">

myvar is what I want displayed when the page loads

vwphillips
03-22-2011, 03:53 PM
<!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" xml:lang="en" lang="en">

<head>

<style type="text/css">
<!--

body {
text-align:right;
/*sets position of entire box*/
margin:50px 0 0 0;
font-family: Trebuchet MS;
}

#wrapper {
text-align:right;
margin:0 0 0 0;
/*sets width of entire box*/
width:350px;
/*sets height of each menu box- used to say min-height:22px;*/
height:200px;
border:1px solid #ccc;
padding:0 0 0 0;
}

a {
color:black;
cursor:pointer;
text-decoration: none;
}

#myvar {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar2 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar3 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar4 {
position:absolute;
border:none;
background:none;
padding:0;
top:86px;
left:40px;
}

#myvar5 {
position:absolute;
border:none;
background:none;
padding:0;
top:121px;
left:40px;
}

-->
</style>


<script type="text/javascript">
<!--
function hide() {
document.getElementById('myvar').style.display = 'block';
document.getElementById('myvar2').style.display = 'none';
document.getElementById('myvar3').style.display = 'none';
document.getElementById('myvar4').style.display = 'none';
document.getElementById('myvar5').style.display = 'none';
// document.getElementById('twentyfourtotwentysix').style.display = 'none';
// document.getElementById('linkstable').style.display = 'block';
// document.getElementById('linkstable').style.visible = 'visible';
}

function hideshow(section) {
var el = document.getElementById(section);
if (hideshow.lst&&hideshow.lst!=el){
hideshow.lst.style.display ='none';
}
el.style.display =el.style.display != 'none'?'none':'';
hideshow.lst=el;
}
//-->
</script>

</head>

<body onload="hideshow('myvar');">

<div class="container">
<div class="content">

<div id="wrapper">
<p><a onclick="hide('linkstable');">HOME</a></p>
<div id="myvar" style="display:none;">222
</div>

<p><a onclick="hide('linkstable');">GALLERY</a></p>
<div id="myvar2" style="display:none;">
</div>

<p><a onclick="hideshow('myvar3');">APPLICATIONS</a></p>
<div id="myvar3" style="display:none;">
<p><a href="blah">MURALS</a></p>
<p><a href="blah">KITCHEN & VANITY</a></p>
<p><a href="blah">FURNITURE</a></p>
<p><a href="blah">STONE & FINISHES</a></p>
</div>

<p><a onclick="hideshow('myvar4');">ORIGINS</a></p>
<div id="myvar4" style="display:none;">
<p><a href="blah">FOSSIL PREPARATION</a></p>
<p><a href="blah">QUARRY INFORMATION</a></p>
<p><a href="blah">FOSSIL HISTORY</a></p>
<p><a href="blah">SPECIES INFORMATION</a></p>
</div>

<p><a onclick="hideshow('myvar5');">ABOUT</a></p>
<div id="myvar5" style="display:none;">
<p><a href="blah">BIO</a></p>
<p><a href="blah">AFFILIATIONS</a></p>
<p><a href="blah">CONTACT US</a></p>
</div>

</div>
</body>
</html>

thebigkahuna
03-22-2011, 09:52 PM
Thanks a lot. Works like a charm!