/    Sign up×
Community /Pin to ProfileBookmark

Visibility Toggle

Hey all,

So what I’m basically trying to do is create a site that has all it’s elements on one page and rather than using hyperlinks, I want to toggle the visibility of some <div>s on the page. I got a script to work to actually toggle the visibility property of the <div>s:

function toggleVisibility(objectID) {
var object = document.getElementById(objectID);
state = object.style.visibility;
if(state == ‘hidden’)
object.style.visibility = ‘visible’;
else{
if(state == ‘visible’)
object.style.visibility = ‘hidden’;
else object.style.visibility = ‘visible’;
}
}

My issue is that I’m trying to write a script to make sure that if one <div> is turned visibile, that the rest are invisible. I know that this is an easy fix and I’m just being dumb, but can someone give me suggestions? Right now I’m trying to work it through an array.

~tsg

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@cgishackJan 06.2008 — here is an example you can play with

<i>
</i>&lt;html&gt;
&lt;head&gt;

&lt;title&gt;Toggle&lt;/title&gt;
&lt;/head&gt;
&lt;script&gt;

var divArray = new Array();
divArray.push("div1");
divArray.push("div2");
divArray.push("div3");
divArray.push("div4");
divArray.push("div5");
divArray.push("div6");
divArray.push("div7");


function turnOffAllDivs()
{
for (var i in divArray)
{
var el = document.getElementById(divArray[i]);
el.style.display = "none";
}
}


function showEl(id)
{

<i> </i>turnOffAllDivs();
<i> </i>var el = document.getElementById(id);
<i> </i>el.style.display = "";
}

&lt;/script&gt;


&lt;body&gt;


&lt;a href="#" onclick="showEl('div1')"&gt; Toggle Div 1 &lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="showEl('div2')"&gt; Toggle Div 2 &lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="showEl('div3')"&gt; Toggle Div 3 &lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="showEl('div4')"&gt; Toggle Div 4 &lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="showEl('div5')"&gt; Toggle Div 5 &lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="showEl('div6')"&gt; Toggle Div 6 &lt;/a&gt;&lt;br /&gt;
&lt;a href="#" onclick="showEl('div7')"&gt; Toggle Div 7 &lt;/a&gt;&lt;br /&gt;

&lt;div id="div1" style="background:#006666; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;
&lt;div id="div2" style="background:#FF9966; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;
&lt;div id="div3" style="background:#996699; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;
&lt;div id="div4" style="background:#FF3333; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;
&lt;div id="div5" style="background:#669900; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;
&lt;div id="div6" style="background:#CC66CC; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;
&lt;div id="div7" style="background:#33CC66; height:44px; width: 450px; display:none"&gt; &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;




I used the CSS display property instead of 'visible'

There is also an array of the Div id's so I knew what elements to hide.

Hope this helps in some why.

Drew
Copy linkTweet thisAlerts:
@thesprucegooseauthorJan 06.2008 — I haven't met a Drew I didn't like.

Hats off to you, my friend. This is just what I was looking for.

~TSG
×

Success!

Help @thesprucegoose 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.2,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...