/    Sign up×
Community /Pin to ProfileBookmark

Deadline looming, please help. How do I incorporate javascript into this HTML?

I really need to use some Javascript to make my site more user friendly, because right now, while simple, it’s horrendously cluttered. So far it’s programmed entirely in HTML as my Javascripting skills are almost nonexistent. I have some programming experience (enough to understand a few things), but not enough to write the code for this.

Here’s a basic set-up:
<html><head></head><body>

Category 1: <a href=”#”>+</a>/<a href=”#”>-</a>

<br><br>

<select name=”menu1″>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>

<br><br>

<select name=”menu2″>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>

</body></html>

Can someone PLEASE help me rewrite this so that both menus are hidden, and clicking on ‘ + ‘ makes menu1 visible, or menu2 if menu1 is already visible, and clicking on ‘ – ‘ makes menu2 hidden (or menu1 if menu2 is already hidden). Basically so that ‘ + ‘ makes them visible, top to bottom, and ‘ – ‘ hides them, bottom to top.

And can you please explain what the script is doing? [I need to do this for at least five menus in at least ten different categories, so I’ll need to be able to edit it, or at least copy and paste it]
Thank you so much!

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@TheBearMayJan 21.2009 — This should be pretty much self explanatory, but if not let me know:

[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">

function showHide(func) {
if (func == "+"){
if(document.getElementById("menu1").style.display=="none")
document.getElementById("menu1").style.display="inline";
else //no need to test menu2 because displaying the element if it's already displayed doesn't hurt
document.getElementById("menu2").style.display="inline";
} else { // reverse the order to hide menu2 before hiding menu 1
if(document.getElementById("menu2").style.display=="inline")
document.getElementById("menu2").style.display="none";
else //no need to test menu1 because hiding the element if it's already hidden doesn't hurt
document.getElementById("menu1").style.display="none";
}

}
</script>
</head>

<body>

Category 1: <a href="#" onclick="showHide('+')">+</a>/<a href="#" onclick="showHide('-')">-</a>

<br><br>

<select name="menu1" id="menu1" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<br><br>

<select name="menu2" id="menu2" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

</body></html>[/code]
×

Success!

Help @xorlogic 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 6.13,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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