/    Sign up×
Community /Pin to ProfileBookmark

Show / Hide Div

Let me start by saying I’m a noob to JavaScript.

What I’m trying to do for my website is have a select menu that shows the number of div’s that’s selected. I found a JS that I could do that with, but it only toggles, not change specifically what’s selected. So if you click the wrong one, it doesn’t work right. Here’s what I got:

[CODE]<body>
<script type=”text/javascript”>
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == “block”) ? “none” : “block”;
}
}
</script>

<select name=”select” id=”select”>
<option>0</option>
<option onclick=”toggle_visibility(‘1’);” >1</option>
<option onclick=”toggle_visibility(‘1′,’2’);”>2</option>
<option onclick=”toggle_visibility(‘1′,’2′,’3’);”>3</option>
<option onclick=”toggle_visibility(‘1′,’2′,’3′,’4’);”>4</option>
</select><br>
<div id=”1″ style=”display: none;”>Test1</div>
<div id=”2″ style=”display: none;”>Test2</div>
<div id=”3″ style=”display: none;”>Test3</div>
<div id=”4″ style=”display: none;”>Test4</div>
</body>[/CODE]

Any help would be appreciated, cause I’m lost.

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERJun 22.2010 — The description of your requirements are somewhat confusing to me, ?

so this is just a guess as to what you want to do.
<i>
</i>&lt;html&gt;
&lt;title&gt;Menu Test&lt;/title&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;

function toggle_visibility(info) {
var sel = document.getElementsByTagName('div');
for (var i=0; i&lt;sel.length; i++) { sel[i].style.display = 'none'; }
if (info == '') { return; }
var d = info.split("");
var e = '';
for (var i=0; i&lt;d.length; i++) {
e = 'd'+d[i];
document.getElementById(e).style.display = 'block';
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;select name="SBox" id="SBox" onchange="toggle_visibility(this.value)"&gt;
&lt;option value=''&gt;0&lt;/option&gt;
&lt;option value='1'"&gt;1&lt;/option&gt;
&lt;option value='12'"&gt;2&lt;/option&gt;
&lt;option value='123'"&gt;3&lt;/option&gt;
&lt;option value='1234'"&gt;4&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;
&lt;div id="d1" style="display: none;"&gt;Test1&lt;/div&gt;
&lt;div id="d2" style="display: none;"&gt;Test2&lt;/div&gt;
&lt;div id="d3" style="display: none;"&gt;Test3&lt;/div&gt;
&lt;div id="d4" style="display: none;"&gt;Test4&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

How close did it come? ?
Copy linkTweet thisAlerts:
@1saeauthorJun 22.2010 — Perfect! Exactly what I'm looking to do. I really appreciate the help!
Copy linkTweet thisAlerts:
@JMRKERJun 22.2010 — You're most welcome.

Glad I could help.

Good Luck!

?
×

Success!

Help @1sae 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.21,
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,
)...