/    Sign up×
Community /Pin to ProfileBookmark

help with text slide in

I need to build a page that has several links in a list on the page. When someone clicks on one of the links, text would slide out from under the link. I have started something but I am not able to get the old text to go away when someone clicks the new text. So, for example, if someone clicked link 1, text would slide out. Then if they clicked link 2, new text should slide out. The problem is, I can get the text from link 1 to automatically go away when someone clicks on link 2.

Here is the code I have so far. Any help I could get would be greatly appreciated!

<body>
<script type=”text/javascript”>
<!–
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’)
e.style.display = ‘none’;
else
e.style.display = ‘block’;
}
//–>
</script>
<a href=”#” onclick=”toggle_visibility(‘one’);”>Link one</a><br />
<a href=”#” onclick=”toggle_visibility(‘two’);”>Link two</a><br />
<a href=”#” onclick=”toggle_visibility(‘three’);”>Link three</a><br />
<div id=”one” style=”display:none;”>This is one</div>
<div id=”two” style=”display:none;”>This is two</div>
<div id=”three” style=”display:none;”>This is three</div>

</body>
</html>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@gomisuteFeb 15.2008 — try this:

[code=html]<script type="text/javascript">
<!--
function toggle(div,divtoshowID){
var d=document.getElementById(div);
var thedivs=d.getElementsByTagName('div');

for (i=0;i<thedivs.length;i++){
if(thedivs[i].id==divtoshowID){
thedivs[i].style.display='';
} else {
thedivs[i].style.display='none';
}
}
}

//-->
</script>

<div id="thelinks">
<a href="#" onclick="toggle('thelinks','one');">Link one</a><br />
<a href="#" onclick="toggle('thelinks','two');">Link two</a><br />
<a href="#" onclick="toggle('thelinks','three');">Link three</a><br />
<div id="one" style="display:none;">This is one</div>
<div id="two" style="display:none;">This is two</div>
<div id="three" style="display:none;">This is three</div>

</div>
[/code]
Copy linkTweet thisAlerts:
@khollyauthorFeb 15.2008 — Thank you. Thank you. Thank you.
Copy linkTweet thisAlerts:
@khollyauthorFeb 23.2008 — Hi all,

I got some changing requirements. Now when someone clicks on one of the links, the link list needs to go away and be replaced by the corresponding div text. I've tried to get this working but haven't had any luck. Any thoughts?
Copy linkTweet thisAlerts:
@khollyauthorFeb 23.2008 — Actually, never mind. Think I figured it out!
×

Success!

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

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

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