Comments on: How to make collapsible lists on a webpage?

Question: How to make collapsible lists on a webpage?

blueshammer — Tue, 30 Mar 2004 13:12:32 -0800

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?

By: tippiedog

tippiedog — Tue, 30 Mar 2004 13:22:33 -0800

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.

By: terrapin

terrapin — Tue, 30 Mar 2004 13:29:57 -0800

This post is an argument FOR the [more inside...] treament.

By: rhapsodie

rhapsodie — Tue, 30 Mar 2004 13:34:26 -0800

theres a great examplet at gazingus.org that uses xhtml, css, and a bit of javascript.

By: yerfatma

yerfatma — Tue, 30 Mar 2004 13:40:23 -0800

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.

By: riffola

riffola — Tue, 30 Mar 2004 14:42:52 -0800

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>

By: riffola

riffola — Tue, 30 Mar 2004 14:44:39 -0800

Oops I don't think this will work as intended. Try it out anyway. It's meant for divs.

By: adamrice

adamrice — Tue, 30 Mar 2004 16:02:15 -0800

That's how this very cool site works--you might want to take a look.