/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] switching layer visability

Hi All,

I have found a script to toggle layers. However, I need the script to hide 3 layers and show 1 layer when a button is clicked. I have the following code:

<div class=”info”>
<h4>About</h4>
<p>
<a href=”javascript:toggleLayer(‘details’);”>+Philosophy</a>
<br /><br />
</p>
<h4>Jobs</h4>
<p>
<a href=”javascript:toggleLayer(‘job1’);”>+3D artist</a>
<a href=”javascript:toggleLayer(‘job2’);”>+Architectural modeller</a>
<a href=”javascript:toggleLayer(‘job3’);”>+Information</a>
</p>
</div>

<div class=”info”>
<div id=”details”>
<h4>Details</h4>
<p>
We are passionate about Architecture + Design and take pride in creating
material to communicate the ideas which shape the landscape around us.
</p>
<p>
The digital medium provides many opportunities to express creativity and
develop an invaluable set of skills where anything is possible and can be
realised in all its glory.
</p>
<p>
We believe we should take advantage of this to constantly push the boundaries
of how we interact with and present these ideas.
</p>
</div>
<div id=”job1″>
<h4>Architectural Modeller</h4>
<p>
Must be skilled with 3D max with 2+yrs industry experience. Good knowledge
of rendering with VRay &amp; Mental Ray. Combustion and After Effects an
advantage.
<br />
Architectural training required.
</p>
<p>
<a href=”mailto:[email protected]”>Apply to [email][email protected][/email]</a>
</p>
</div>
<div id=”job2″>
<h4>3D Artist</h4>
<p>
Must be skilled with 3D max with 1-2yrs industry experience. A good
understanding of how to read architectural drawings and construction details.
<br />
Architectural training required.
</p>
<p>
<a href=”mailto:[email protected]”>Apply to [email][email protected][/email]</a>
</p>
</div>
<div id=”job3″>
<h4>Information</h4>
<p>
We are permanently on the lookout for telented people to join our team. We are
a small company with big ideas and are looking to expand. This is a great
opportunity to be art of a friendly and exciting company. We are located in
excellent offices near to the train station in Huddersfield, Manchester and
Leeds are a stones throw away.
</p>
<p>
If you have a flair for creating aspirational and beautiful imagery then you
should contact us with some samples of your work.
</p>
</div>
</div>

<div class=”clear”></div>

</div>

<!– END INFO –>

<img src=”images/buttons/the_end.jpg” alt=”the end” />

<script type=”text/javascript”>
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
if (whichLayer==’details’)
{
style2.display = style2.display? “”:”block”;
}
else if (whichLayer==’job1′)
{
style2.display = style2.display? “”:”block”;
}
else if (whichLayer==’job2′)
{
style2.display = style2.display? “”:”block”;
}
else if (whichLayer==’job3′)
{
style2.display = style2.display? “”:”block”;
}
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
if (style2==details)
{
style2.display = style2.display? “”:”block”;
}
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
if (style2==details)
{
style2.display = style2.display? “”:”block”;
}
}
}
</script>

Basically, the current script toggles the four layers on and off. What I need it to do is when one of the buttons is clicked, to turn on that layer and turn off the remaining three.

The webpage can be seen at [url]www.id30.com/pikcells[/url].

Any help anybody can provide would be much appreciated.

Many thanks

David

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@sovikJan 30.2007 — For the static page and good naming is not hard to do.

here is a sample code:
<i>
</i>&lt;a href=# onclick="foo(['job1'])"&gt;aaa&lt;/a&gt;
&lt;a href=# onclick="foo(['job2'])"&gt;bbb&lt;/a&gt;
&lt;a href=# onclick="foo(['job3'])"&gt;ccc&lt;/a&gt;
&lt;div id="job1"&gt; 1 &lt;/div&gt;
&lt;div id="job2"&gt; 2 &lt;/div&gt;
&lt;div id="job3"&gt; 3 &lt;/div&gt;

&lt;script&gt;
function foo(obj) {
for (var x=1; x&lt;=3; x++) {
var divname="job"+x;
if (divname!=obj){
document.getElementById(divname).style.display='none';
}else{
document.getElementById(divname).style.display='';
}
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@davemofauthorJan 30.2007 — Many thanks for the help. I did manage to sort it in the end, but the way you have done it is far better, so I shall swap it over.

Once again many thanks for your help.

David
×

Success!

Help @davemof 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.18,
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,
)...