Show - hide script?

**TimNiceButDim** · Mar 3, 2003, 04:21

Does anyone know how i could use a show - hide script on my website in order to show or hide the menu?
I have a menu system integrated into my site - www.hostcompanies.com its a really cool menu but maybe be better if i could have a show/hide button on it.

The menu is generated using iNaviagte which script is on each page so i need to keep the menu in the same code of the page in order to keep the iNavigate generator working properly when i update or change the menu.
The menu is inside a table - i would like to show/hide the entire table - this would give more room to show the page contents.

Ideally i would like the menu to show when visiting the page but to be able to hide it when needed.

Does anyone know of a script that could do this?

**gregc** · Mar 4, 2003, 14:53

What this page has is called a menu tree script.

My menu tree is much simpler, and the code is below:

Code:

<html>
<head>
<script language="JavaScript">
function open(theobj) {
var obj = document.getElementById(theobj);
var opener = document.getElementById("i" + theobj);
if(obj.style.display == "none" ) {
	obj.style.display = "block";
opener.innerHTML = "-";
} else {
	obj.style.display = "none";
opener.innerHTML = "+";
}
}
function openall() {
var objarray = document.getElementsByTagName("span" );
for (var i=0; i < objarray.length; i++) {
	objarray[i].style.display = "block";
document.getElementById("i" + objarray[i].id).innerHTML = "-";
}
}
 
function closeall() {
var objarray = document.getElementsByTagName("span" );
for (var i=0; i < objarray.length; i++) {
	objarray[i].style.display = "none";
document.getElementById("i" + objarray[i].id).innerHTML = "+";
}
}
</script>
 
<style>
a.sign {
text-decoration:none;
font-size:18px;
font-family:arial;
color:blue;
}
a.link {
text-decoration:none;
font-size:15px;
font-family:arial;
margin-left:15px;
color:blue;
}
a.openclose {
text-decoration:none;
color:blue;
font-size:15px;
font-family:arial;
}
</style>
<BODY bgcolor="#cccccc">
<H3 align="center">YOURSITE.COM</H3>
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('scripts');" id="iscripts" class="sign">+</A>
Scripts<BR>
<span id="scripts" style="display:none;">
<A href="Your_URL_here" class="link">
	JavaScript Scripts
</A><BR>
<A href="Your_URL_here" class="link">
	Dynamic HTML Scripts
</A><BR>
<A href="Your_URL_here" class="link">
	Other Scripts
</A><BR>
</span>
 
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('tutorials');" id="itutorials" class="sign">+</A>
Tutorials<BR>
<span id="tutorials" style="display:none;">
<A href="Your_URL_here" class="link">
	HTML Tutorials
</A><BR>
<A href="Your_URL_here" class="link">
	CSS Tutorials
</A><BR>
<A href="Your_URL_here" class="link">
	JavaScript Tutorials
</A><BR>
<A href="Your_URL_here" class="link">
	Dynamic HTML Tutorials
</A><BR>
<A href="Your_URL_her " class="link">
	Other Tutorials
</A><BR>
</span>
 
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('support');" id="isupport" class="sign">+</A>
Support<BR>
 
<span id="support" style="display:none;">
<A href="Your_URL_here" class="link">
	FAQs
</A><BR>
<A href="Your_URL_here" class="link">
	Forums
</A><BR>
<A href="Your_URL_here" class="link">
	Scripting Support
</A><BR>
<A href="Your_URL_here" class="link">
	Technical Help
</A><BR>
</span>
 
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">pen('contact');" id="icontact" class="sign">+</A>
Contact us<BR>
<span id="contact" style="display:none;">
<A href="Your_URL_here" class="link">
	Email Us
</A><BR>
<A href="Your_URL_here " class="link">
	Phone and Address
</A><BR>
<A href="Your_URL_here " class="link">
	Forums
</A><BR>
</span>
<BR>
<A href="javascript<IMG alt=:o src="images/smilies/redface.gif" border=0 smiliecode=":o">penall();" class="openclose">Open all</A> |
<A href="java script:closeall();" class="openclose">Close all</A>
</div>
</BODY>
</html>

If you want to only have one menu list open at a time, re-write this part of the code:

Code:

if(obj.style.display == "none" ) {
	obj.style.display = "block";

To this:

Code:

 if(obj.style.display == "none" ) {
	closeall();
	obj.style.display = "block";

**TimNiceButDim** · Mar 4, 2003, 14:57

Its ok i have had a custom script made. Now my menu system works with a show and hide button for the naviagation.

You can see the result at http://www.hostcompanies.com/newnav.htm

Thanks for all your help anyhow

User Tag List

Thread: Show - hide script?

Thread Tools

Display

Show - hide script?

Bookmarks

Bookmarks

Posting Permissions