Accordian Lists

The details are inside a DIV that has its CSS display: attribute initially set to none. Clicking the heading toggles the DIV's display: between none and block, thereby expanding and collapsing the DIV's contents.

This works well unless JavaScript is disabled.

These details are inside a DIV just like the example above, except the CSS is initially set to display: block.

This works well in that all information is accessible even without JavaScript. If JavaScript is disabled, the only functionality lost is the ability to collapse sections.