JavaScript Forum

**Eufonik** · 03-20-2007, 09:16 PM

Hi All,

I'm trying to get this script to work:

Code:

<script language="javascript" type="text/javascript">
function toggle(item) {
    obj=document.getElementById(item);
    visible=(obj.style.display!="none")
    key=document.getElementById("collapse_" + item);
    if (visible) {
    obj.style.display="none";
    key.innerHTML="[+] Expand";
    }
    else {
    obj.style.display="block";
    key.innerHTML="[-] Collapse";
    }
}
</script>

Here is my current HTML:

Code:

<a id="collapse_collections" href="javascript:toggle('collections')">[+] Expand</a><br />
<div id="collections" style="display:none">
<a href="/site/interests/collections/books">Books</a><br />
<a href="/site/interests/collections/magazines">Magazines</a><br />
<a href="/site/interests/collections/movies">Movies</a><br />
<a href="/site/interests/collections/music">Music</a><br />
<a href="/site/interests/collections/video_games">Video Games</a><br />
<a href="/site/interests/collections/wristwatches">Wristwatches</a><br />
</div>

Right now, when I expand/collapse, the links are showing up as [+] Expand or [-] Collapse. However, I'd like to be able to put any text after "Expand" or "Collapse" and include it as part of the link, so that it could be like so:

[+] Expand Music
[+] Collapse Music
[+] Expand Video Games
[+] Collapse Video Games

etc. The key is probably in this part of the JS:

Code:

key.innerHTML="[+] Expand";
key.innerHTML="[-] Collapse";

However, I'm a JS n00b, and am not sure how to do this... If someone could help me, I'd really appreciate it! Thanks in advance...

**jito** · 09:44 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript" type="text/javascript">
function toggle(item) {
    obj=document.getElementById(item);
    visible=(obj.style.display!="none")
    key=document.getElementById("collapse_" + item);
    if (visible) {
    obj.style.display="none";
    key.innerHTML="[+] Expand_"+item;
    }
    else {
    obj.style.display="block";
    key.innerHTML="[-] Collapse_"+item;
    }
}
</script>
</HEAD>
<BODY>
<a id="collapse_Music" href="javascript:toggle('Music')">[+] Music</a><br />
<div id="Music" style="display:none">
<a href="#">Music1</a><br />
<a href="#">Music2</a><br />
</div>
<a id="collapse_VideoGames" href="javascript:toggle('VideoGames')">[+] Video Games</a><br />
<div id="VideoGames" style="display:none">
<a href="#">Video Games1</a><br />
<a href="#">Video Games2</a><br />
</div>
</BODY>
</HTML>

A bit explanation for you. Here we actually passing the div_id to the javascript function toggle to show and hide the div. we are calling the function using a <a> tag.
Ask if you have any question.

**mgraphic** · 03-21-2007, 11:23 AM

Nice solution, this kinda helps me.

**ADAM Web Design** · 03-21-2007, 11:59 AM

One thing you will want to do with this type of thing is add an ondblclick event handler. If you click the link twice quickly, you may not always get the desired result without it.