ISO HTML Help

[sraun]

I'm trying to figure out how to do an expanding list in HTML - anyone have any hints? I know what I want it to look like, but I can't conceptualize how to search for what I'm looking for.

It starts out looking like this:

1. Heading One


2. Heading Two


3. Heading Three


4. Heading Heading Four

Click on Heading One, and it looks like this:

1. Heading One




1. Item One


2. Item Two


3. Item Three




2. Heading Two


3. Heading Three


4. Heading Heading Four

Click on Heading Two, and you get either of these:

1. Heading One




1. Item One


2. Item Two


3. Item Three




2. Heading Two




1. Item A


2. Item B


3. Item C




3. Heading Three


4. Heading Heading Four

or:

1. Heading One


2. Heading Two




1. Item A


2. Item B


3. Item C




3. Heading Three


4. Heading Heading Four

Comments

[dd-b.livejournal.com]

So far as I know, you can't do anything like that in HTML; you need to go to javascript tweaking the DOM on the fly (which means it won't work for lots of people).

[sraun]

I don't need it to work for lots of people - I want it for an internal knowledgebase, and I'm 99% sure that we have javascript enabled by default. And given the way things work around here, I can safely assert that, for my target audience, they won't have turned it off themselves. (They may not be able to turn it off.)

[barondave.livejournal.com]

I'd keep it simple: Make more than one page, and clicking on the heading loads the appropriate page. This may not be exactly what you want, but (as dd_b said, you'd have to do it in Javascript and I don't recommend that for something this simple.

[sraun]

Unfortunately, that means maintaining a minimum of 17 near-identical pages. I really don't want to have to maintain consistency/accuracy across that group.

[adamek.livejournal.com]

You could write the entire page. Then split the lower level headings and sections into separate files which you refer to with include statements.

For example,






However, to get what your asking for with static pages would still require about 17 pages, the code for the different top pages would be a mashup of different include statements.

On the other hand, you could fall back on an old approach that will work with any browser going back to lynx and mosaic. Write the full page and then write a table of contents at the top with links to each section below

[adina-atl.livejournal.com]

You might try using XML. A lot of browsers, or at least Internet Explorer, will automatically represent XML as a tree view. Unfortunately it has to be the entire document or nothing, I think. It will also present it first in fully expanded view.

[sraun]

I really want it to start collapsed, and be expandable on an item-by-item basis.

[pgdudda.livejournal.com]

Can't be done in standard HTML. DHTML might maybe be able to do it, but I know nothing about it, so I can't even vouch for that. JavaScript is going to be the easiest way to do it -- a simple "onclick(document.write(blahblah))" or "onclick(visible)" should do the trick.[1] Either that or use the XML suggestion, which has definite drawbacks.

[1] My synax is almost certainly wrong, but I think you understand my meaning...

[xinef.livejournal.com]

Does it have to be dynamic, or is the data pretty static?

Thought is that you could do it with divs, make them hidden or in-line depending on what had been clicked, but default when page was loaded would have all hidden except for the top level.

[backrubbear.livejournal.com]

Javascript is certainly the most accepted answer for this sort of thing. Depending on the application, there are several libraries you could just grab that'll do the trick.

If you want to hand roll it, it's not that bad. Simply put an id tag on each ol tag for the pop out lists. Create an onclick event on the encapsulating menu. When clicked, toggle the style.visible attribute.

[spiffikins]

add a javascript function in your page:

function change(id)
{
identity=document.getElementById(id);
myClass = identity.className;
if (myClass == 'divHidden') {
identity.className='divShown';
} else {
identity.className='divHidden';
}
}

Add 2 entries to a style tag on your page:

.divHidden {
display: none;
}

.divShown {
display: block;
}


wrap the lists in div tags with id settings, then make a button or link and set an onClick=change(id) where id is the name of the div you want to show/hide.


ie

(a href="#" onclick="change('list1');)Heading 1(/a)
(div id="list1" class=divHidden)
1. option1
2. option2
(/div)

(a href="#" onclick="change('list2');)Heading 2(/a)
(div id="list2" class=divHidden)
1. option3
2. option4
(/div)