David Morón's Blog: HTML expand collapse tutorial

Wow, I can't believe how hard it is for people to write an small simple tutorial about stuff that's simple so here's my attempt to do it, I spent like two hours trying to get this, first because people assume too much and second because steps aren't well explained on freaking tutorial websites.

OK It's actually made using Javascript... don't be scared it's very easy, I hope this helps someone.

All you need to do:

On your HTML file, inside your <head>... add the following:

<script langauge="JavaScript" type="text/javascript">
function toggleList(id){
if(document.getElementById){
var element = document.getElementById(id);
if(element){
element.style.display =(element.style.display == 'none')?'':'none';
}}}
</script>

So you will have something like:

<head>
...
The code above
...
</head>

Then paste this somewhere inside the body of the html:

<text>Expand -Collapse</text> <a href="javascript:toggleList('idname')">[+/-]</a></strong>
<ul id="idname" style="display:block">
Stuff to be expanded/collapsed goes here.
</ul>

IF YOU WANT IT TO START COLLAPSED simply change style="display:block" to style="display:none" on the code above.

IF YOU WANT MORE THAN ONE simply change idname to idname2, idname3, etc on the code above on both places it appears, for example:

<text>Expand -Collapse</text> <a href="javascript:toggleList('idname2')">[+/-]</a></strong><
ul id="idname2" style="display:block">
Stuff to be expanded/collapsed goes here.
</ul>

That's it... I used the code from http://forums.digitalpoint.com/showthread.php?t=292894

If you have any questions, drop a comment, or if you feel anything should be added or removed, I'll gladly change it.

David Morón's Blog

Sunday, April 22, 2007

HTML expand collapse tutorial

No comments: