/    Sign up×
Community /Pin to ProfileBookmark

Javascript Toggle

Copy linkTweet thisAlerts:
Feb 26.2012

Hi all,

Really new to javascript and was hoping y’all could help me with a bit of trouble I’m having.

I’m using the script below to toggle 5 DIV tags independently on click:

[CODE]// JavaScript Document

function toggleSpecific(elementid) {
var node = document.getElementById(elementid);
if(node.style.display == ”) {
node.style.display=’none’;
}
else {
node.style.display = ”;
}
}[/CODE]

[CODE]<div id=”hide1″ style=”display:none; width:275px; position:relative; top:30px; left:30px;”>
<img style=”float:left; position:relative; top:37px;” src=”images/arrow_left.png” width=”11″ height=”20″ alt=”Arrow” />
<div class=”info_box_left”>
<img style=”float:left; margin:0px 10px 0px 0px” src=”images/thumb_sample.jpg” width=”64″ height=”76″ alt=”Sample Image” /><strong>Headline Goes Here</strong><br />
Sample body copy goes here
</div>
</div>[/CODE]

The issue I’m trying to solve is how do I get only a single DIV to show at any time. So, if you open hidden info(1) and then click the button for hidden info(2), hidden info(1) disappears and hidden info(2) displays.

All your feedback is appreciated.

Thanks!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@hyperionXSFeb 26.2012 — [code=html]
<style>
.divs{
display:none; width:275px; position:relative; top:30px; left:30px;
}
#hide1{
display:block;
}
</style>
<div id="hide1" class="divs">
<img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
<div class="info_box_left">
<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
Sample body copy goes here hide 1
</div>
</div>
<div id="hide2" class="divs">
<img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
<div class="info_box_left">
<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
Sample body copy goes here hide 2
</div>
</div>
<div id="hide3" class="divs">
<img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
<div class="info_box_left">
<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
Sample body copy goes here hide 3
</div>
</div>
<div id="hide4" class="divs">
<img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
<div class="info_box_left">
<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
Sample body copy goes here hide 4
</div>
</div>
<script type="text/javascript">
function toggleSpecific(elementid) {
var elms = document.getElementsByClassName('divs');
var node = document.getElementById(elementid);
for(i in elms){
if(elms[i]==node)
elms[i].style.display = 'block';
else
elms[i].style.display = 'none';
}
}
toggleSpecific('hide1');
/*
toggleSpecific('hide2');
toggleSpecific('hide3');
toggleSpecific('hide4');
*/
</script>
[/code]
Put a class to all the divs you want to hide. We will keep these divs in elms variable.

On function call, we compare each div with the current one and if is the current one, we show it, otherwise we hide it.
Copy linkTweet thisAlerts:
@bluecollar01authorFeb 26.2012 — All the DIV elements aren't the same width and don't have the same positioning so I'm assuming I can position with a DIV wrapper and use the DIVS class inside for the toggle?

Thank you very much for your response!
Copy linkTweet thisAlerts:
@hyperionXSFeb 26.2012 — Don't matter the properties of the divs, as long as they all have class="divs".
×

Success!

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

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

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