Collapse & Expand Javascript Menu?

[Solarpitch]

Hey guys,

I am just wondering if someone can point me to a really good Javascript Collapse & Expand menu tutorial. One that includes Using images (ie. Expand + sign, and Collapse - sign).

Cant find any that make much sense.


Gerard

[fenway]

Well, the expanding/collapsing is usually just showing/hiding divs; as for the image swap, you can do it that way, move a clipping rectangle, or just use a text glyph instead.

[bibby]

You shouldn't need an image or glyph.

If the '+' is the [i]hot [/i] element, then it's likely in it's own div or span.
So you could replace the character in that div with [b].innerHTML()[/b] .

Make a function for show() and hide(),  but make a third for [b]toggle()[/b], so that you can use the same function for both actions.

[bibby]

Figured I'd mark this up for you.
I didn't need a show()/hide() after all ; toggle() did both.

[code]

<script>
function toggle(hot,id)
{
var a = document.getElementById(id).style.display;
if (a != 'block')
{
document.getElementById(id).style.display = 'block';
hot.innerHTML='[-]';
}
else
{
document.getElementById(id).style.display = 'none';
hot.innerHTML='[+]';
}

}
</script>

<style>
div {
background-color:#C0FFEE;
}

.hidden {
display:none;
background-color:#ABCDEF;
}

#hotstuff{
cursor:pointer;
}
</style>

<div>
<span id="hotstuff" onclick="toggle(this,'secret')">[+]</span> &lt;&mdash; expand this row.
</div>
<div class="hidden" id="secret">
blah<br />blah<br />blah<br />blah<br />blah<br />
</div>
[/code]