Show/Hide (Toggle) Question

[Eufonik]

Hi All,

I'm trying to get this script to work:

<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:

<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:

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...

[vikrantkorde]

Hi there,

use this code

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

and

<a id="collapse_collections" href="javascript:toggle('collections', 'Books')">[+] Expand Books</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>

here I am just passing the itemname in the JS function.

[Eufonik]

Thanks, Vikrant!!! So greatly appreciated!

I also have one more question. Not sure why, but it seems like when I call style="display:none" from an external style sheet, the "toggle" function doesn't work unless I click twice.

I'd be calling it like so from within styles.css:

#collections {
display: none;
}

However, when I include style="display:none" locally, like so:

<div id="collections" style="display:none"></div>

Everything works fine on the first click...


Does anyone know why this might be? The code should work regardless of whether the CSS is called locally or externally, correct?

[Eufonik]

Anyone have any idea about my second question?

[jimfraser]

Yes.

The style property of an object does not include the CSS inherited stuff, so if I have:

thing {
display:none;
}
...
<div class="thing"></div>

if I test the style.display property of my div, it will be an empty string, even though visibly it is not displayed.

Ways to fix this:
- set the display property as part of the style attribute on the object
- use currentStyle (ie) and getComputedStyle (ff) to determine whether or not the object is displayed

[Eufonik]

Thanks so much, Jim. Really appreciate it. Seems like the easiest way to go is just set the display property as part of the style attribute on the object.