How to make collapsible lists on a webpage?

March 30, 2004 1:12 PM

Because I only know pidgin HTML, I'm not sure if what I'm about to ask is Web Design 101 or Web Design 665, but: If I want to have a collapsible list, such that if someone clicked on "Words that start with B" in the following:

Words that start with A
Words that start with B
Words that start with C

the page would then reformat to show

Words that start with A
Words that start with B
balustrade
brickbat
bumptious
Words that start with C

without the whole page having to reload. Can someone please point me to a resource or study-able example?
posted by blueshammer to computers & internet (7 comments total)

What you want to do can only be done, as far as I know, with JavaScript. Do a Google search for something like 'collapsible Javascript tree' to find examples.

It's definitely well above HTML 101, but you should be able to find an example that you can use or adapt without too much difficulty.
posted by tippiedog at 1:22 PM on March 30, 2004

This post is an argument FOR the [more inside...] treament.
posted by terrapin at 1:29 PM on March 30, 2004

theres a great examplet at gazingus.org that uses xhtml, css, and a bit of javascript.
posted by rhapsodie at 1:34 PM on March 30, 2004

Here's a lite version of the function I use;

<script type="text/javascript">
function changeDisplayState(sBoxId)
{
if (document.getElementById) {
oBox = document.getElementById(sBoxId).style;
if (oBox.display == "none" || oBox.display == "NULL") {
oBox.display = "block";
} else {
oBox.display = "none";
}
}
}
</script>

You'll need to nest lists inside each other as valid HTML (i.e., children <ul> live inside their parent's <li> tag) and then link the parent list item with a . . . oh man, this isn't helping and I'm not sure how well the preview is going to look . . . hold on a sec:

<ul>
<li>parent 1</li>
<li><a href="javascript:changeDisplayState('childset_1')">parent 2</a>
<ul id="childset_1">
<li><a href="javascript:changeDisplayState('grandchildset_1')">child 1</a>
<ul id="grandchildset_1">
<li>grandchild 1</li>
</ul>
</li>
</ul>
</li>
</ul>

It's definitely not 101 and I'm not sure how to explain it simply. But there it is, hopefully sans HTML errors.
posted by yerfatma at 1:40 PM on March 30, 2004

Try the following:

<script type="text/javascript">
function toggle(divName){
if(document.getElementById)
{
var theDiv = document.getElementById(divName);
if(theDiv)
{
if(theDiv.style.display == 'none')
{
theDiv.style.display = 'block';
}
else
{
theDiv.style.display = 'none';
}
}
}
}
</script>

<ul>
<li><a href="javascript:toggle('letterA')">Words the begin with A</a>
<ul id="letterA">
<li>Alpha</li>
<li>Apple</li>
<li>Azure</li>
</ul>
</li>
<li><a href="javascript:toggle('letterB')">Words the begin with A</a>
<ul id="letterB">
<li>Beta</li>
<li>Bombay</li>
<li>Buzz</li>
</ul>
</li>
</ul>

posted by riffola at 2:42 PM on March 30, 2004

Oops I don't think this will work as intended. Try it out anyway. It's meant for divs.
posted by riffola at 2:44 PM on March 30, 2004

That's how this very cool site works--you might want to take a look.
posted by adamrice at 4:02 PM on March 30, 2004