/    Sign up×
Community /Pin to ProfileBookmark

Closing a menu

Copy linkTweet thisAlerts:
Oct 13.2006

I have a menu script:

[CODE]
function hideSub() {
if (!document.getElementsByTagName)
return;
var mnu = document.getElementById(“menu”);
var toplis = mnu.getElementsByTagName(“li”);
for (it = 0; it < toplis.length; it++) { /* each top li */
if (toplis[it].className != ‘show’) {
var sublis = toplis[it].getElementsByTagName(“li”);
for (is = 0; is < sublis.length; is++) { /* each sub li */
if (sublis[is].style)
sublis[is].style.display = ‘none’;
}
}
}
}

function mShow(Me) {
if (!Me.getElementsByTagName)
return;
hideSub();
var mylis = Me.getElementsByTagName(“li”);
for (j = 0; j < mylis.length; j++) {
mylis[j].style.display = ‘block’;
}
}[/CODE]

Right now, when a top level item is clicked, it opens the menu but does not close when re-clicked. Opening another menu item will close it but I want to be able to close the open one. The menu is called like this:

[CODE]
<ul id=”menu”>
<li onclick=”mShow(this);return false;”>Options 1
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 1</a></li>

</ul>
</li>
</ul>[/CODE]

Any ideas? (I don’t have it online so I can give a URL. If you need the CSS or entire HTML portion of the script, let me know.)

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@nitro2k01Oct 13.2006 — I can solve this. But just a question, why do you hide all the sub-li's, instead of just hiding the ul?
Copy linkTweet thisAlerts:
@LeeUauthorOct 13.2006 — Actually, it's not my script. It's from "anonymous". I'm posting it over on JavaScript Source. I'll add a credit for you ... I just need your name and URL. You can PM me if you like.
Copy linkTweet thisAlerts:
@JMRKEROct 13.2006 — Consider this:
[code=php]
 function Toggle(Info) {
CState = document.getElementById(Info);
if (CState.style.display == "none") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
}
[/code]
Passing the 'id' to the function allows you to use one link

to show/hide the information in any associated 'div' region.

Called like this:
[code=php]
<a href="#" onClick="Toggle('Hobbies')">Hobbies</a>
<div id='Hobbies'>
<ul>
<li>Computers
<li>Banjo
<li>Tennis
</ul>
</div>
[/code]
Copy linkTweet thisAlerts:
@nitro2k01Oct 13.2006 — Try this:function mShow(Me) {
if (!Me.getElementsByTagName)
return;
var mylis = Me.getElementsByTagName("li");
var isvisible=mylis[0].style.display!='none';

hideSub();

if(isvisible)
return;

for (j = 0; j &lt; mylis.length; j++) {
mylis[j].style.display = 'block';
}
}
Copy linkTweet thisAlerts:
@LeeUauthorOct 13.2006 — nitro2k01,

That works great! Thanks. Do you want credit for it?

JMRKER,

Your's is also great - nice and simple. Can you make it so it is displayed closed at first? Mind if I post it over on JavaScript Source? If not, then just give me you name and a URL and I'll post it on the site with the script.
Copy linkTweet thisAlerts:
@JMRKEROct 13.2006 — Sure, just change like this:
[code=php]
<div id='Hobbies' style='display:none'>
.... [same code] ...
</div>
[/code]
You can create as many of these as needed, just change to a unique 'id' value for each.

Would like to take credit, but all I did was modify a snippet of code from: http://www.dustindiaz.com/top-ten-javascript/

See tip #6.

For a more extensive example of how I use it in a script, see: http://www.nova.edu/~rumsey/jay/index.html

Here I just imported the Bookmarks from NS and/or IE.

Purpose: I have a common location where my bookmarks are instead of having different entries on my computers at home or work or laptop and different versions of the bookmarks with different browsers.

The entries are somewhat jumbled at this time as I'm in the process of eliminating some that I have never gone to visit due to lack of interest, but you should be able to get the general idea should you wish to make your own common bookmark site.

I also added some code that shows/hides ALL bookmarks at one time rather than open each one individually. Reason, I can printout the entire list without clicking on each link one-at-a-time.

If you still want more information, PM me.
×

Success!

Help @LeeU spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...