'More Content' / DOM collapse scripts

A tutorial on how to ensure a fallback option when using an 'expand / collapse' element.

Seven ways to toggle an element’s display with JavaScript. One example with a single DIV and another example with multiple DIVs. DustinDaz also gives us: collapsable effects with scriptaculous.

Using a Definition List and the DOM to create a nice FAQ page where clicking on the DTs (the questions) "toggles" the associated DDs (the answers).

A tutorial exploring a couple ways to show and hide details by clicking on headings.

'More content' links with CSS and the YUI library.

'More content' links with changing toggle indicator.

Unobtrusive javascript for applying expand/shrink behaviour. Script generates buttons and apply behaviour on them for divs which have a class name 'collapsable'.

Using jQuery for showing or hiding something, or a group of things. There's also: slicker show and hide with pretty effects.

Using a three-column CSS layout and adding javascript to enable collapsible left and right columns.

Creating a drop down panel page section. Web standards compliant - Xhtml and uses Prototype & Script.aculo.us.

Designing tree menus with separation of content, presentation and behaviour. Uses JavaScript (jquery) to both show and hide nested DIVs rather than using CSS to hide the nested DIVs so it still works with JavaScript turned off and without CSS working. This means no JavaScript and CSS dependency.

Tutorial and code for swapping the visibility of layer content. Includes link style change functionality. Layers can be positioned absolute, inline or table cells. Internet Explorer 4+, Netscape 4, Netscape 6+/Mozilla and Opera.

An almost pure CSS method to have page columns where you can 'click to see more' information.