CSS Codes
CSS Layouts
Results 1 to 6 of 6

Thread: Help? Simple nav hide/show problem?

  1. 12-03-2010, 12:28 AM #1
    theglengold
    theglengold is offline New Comer (less than 5 posts)
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help? Simple nav hide/show problem?

    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

    Code:
    <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>
    Reply With Quote Reply With Quote
  2. 12-03-2010, 10:53 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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" 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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 12-03-2010, 05:05 PM #3
    theglengold
    theglengold is offline New Comer (less than 5 posts)
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you!!!

    You have no idea how much you've made my day!!
    Reply With Quote Reply With Quote
  4. 03-22-2011, 03:02 PM #4
    thebigkahuna
    thebigkahuna is offline New Comer (less than 5 posts)
    Join Date
    Mar 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    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" 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.

    Code:
    <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
    Reply With Quote Reply With Quote
  5. 03-22-2011, 03:53 PM #5
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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" 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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  6. 03-22-2011, 09:52 PM #6
    thebigkahuna
    thebigkahuna is offline New Comer (less than 5 posts)
    Join Date
    Mar 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot. Works like a charm!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules