How to make collapsible lists on a webpage?
March 30, 2004 1:12 PM Subscribe
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?
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?
This post is an argument FOR the [more inside...] treament.
posted by terrapin at 1:29 PM on March 30, 2004
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
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
<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:
posted by riffola at 2:42 PM on March 30, 2004
<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
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
posted by adamrice at 4:02 PM on March 30, 2004
« Older Visualisation plugins for winamp suited for ambiet... | How do permanent creases stay permanent? Newer »
This thread is closed to new comments.
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