Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Need help with javascript menu

joecool85

joecool85

macrumors 65816
Original poster
Mar 9, 2005
1,355
4
Maine
I got it to toggle back and forth, but I want it to be hidden when first loaded. Would that be a command like onLoad or something?

Here is my code:

<html>
<head>
<script type="text/javascript"></script>
<title>Brother stuff</title>
</head>
<body>

<div>

<a href="javascript:toggle('menu1')">Menu</a><br>
<h2 id="menu1">Contents</h2>

<script type="text/javascript">
document.getElementById('menul').style.listStyle="none";
document.getElementById('tutorioli').style.display="none"; // collapse list
document.getElementById('tutorialsli').style.display="none"; // collapse list
function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>
</div>

</body>
</html>
 
Try this, it's how I got the sliding panels to work on my site

joecool85 said:
I got it to toggle back and forth, but I want it to be hidden when first loaded. Would that be a command like onLoad or something?

Here is my code:

<html>
<head>
<script type="text/javascript"></script>
<title>Brother stuff</title>
</head>
<body>

<div style="display:none;">

<a href="javascript:toggle('menu1')">Menu</a><br>
<h2 id="menu1">Contents</h2>

<script type="text/javascript">
document.getElementById('menul').style.listStyle="none";
document.getElementById('tutorioli').style.display="none"; // collapse list
document.getElementById('tutorialsli').style.display="none"; // collapse list
function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>
</div>

</body>
</html>
Click to expand...
 
I can't tell exactly what you're doing (I'm not a javascript expert by far..) but I know that you can create a function and have it run when the page loads like this:

<body onload="myFunc();">

I use this on pending.be to disable certain fields on load. This ensures that they aren't disabled by default for browsers that have javascript disabled.. But that's off-topic.
 
Got it to work:

<html>
<head>
<script type="text/javascript"></script>
<title>Brother stuff</title>
</head>
<body>


<div>

<a href="javascript:toggle('joe')">Joe</a><br>
<h2 id="joe">This is my poem stuff.</h2>

<a href="javascript:toggle('bad')">Bad</a><br>
<h2 id="bad">This is my other stuff.</h2>

<script type="text/javascript">
document.getElementById('joe').style.display="none";
document.getElementById('bad').style.display="none";

function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>
</div>

</body>
</html>

What it does is loads:

Joe
Bad

Then you can click on each one and it pulls down stuff. Don't ask about the words in it, I was just getting the code right. I'll post the final project when I'm done. It's an expanding poem.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back