Elements with display: block, inline-block, table, inline-table can be made collapsible/expandable by specifying property collapsible: yes.

Table 4.1. Properties used to parametrize the collapsibility of a block or table

Property	Value	Initial value	Description
collapsible	yes | no	no	yes block or table can be collapsed and expanded no block or table cannot be collapsed and expanded
collapsed	yes | no	no	yes block or table is initially collapsed no block or table is initially expanded
not-collapsible-head	non-negative integer	0	Number of child elements found at the beginning of the block or table which must be kept visible even if the block or table is collapsed. If the block or table has fewer child elements than those specified proprerty not-collapsible-head or in property not-collapsible-foot, then the block or table is not considered to be collapsible.
not-collapsible-foot	non-negative integer	0	Number of child elements found at the beginning at the end of the block or table which must be kept visible even if the block or table is collapsed.
collapsed-content	same as property content	no content	Content which must be displayed (in lieu of hidden graphical items) when the block or table is collapsed. Note that this content is transformed to an image before being used. Therefore this type of generated content cannot wrap at word boundaries. Do not specify label() as a value for collapsed-content. Instead specify xpath().
collapsed-content-align	auto|left|center|right	auto	Specifies how the collapsed-content image is to be horizontally aligned. Special value auto means that the collapsed-content image must be horizontally aligned just like the normal content it represents.

The above properties cannot be inherited whether explicitly (inherit keyword) or implicitly (inherited property).

Examples:

section {
    collapsible: yes;
    not-collapsible-head: 1; /*keep title visible*/
}

table {
    collapsible: yes;
    not-collapsible-head: 1; /*keep title visible*/
    collapsed-content: url(../../icons2/table.gif);
}

Specifying collapsible: yes is not sufficient to be able to use collapsible blocks and tables. A special kind of toggle button called a collapser must be added to the generated content of the collapsible block or table or to the generated content of one of its descendants.

This toggle button is inserted in generated content using the collapser() pseudo-function.

Examples:

section > title:before { 
    content: collapser() " " simple-counter(n-) " "; 
}

table > title:before {
    content: collapser() " ";
}

The above examples show the most common case: A title or caption element is the mandatory first or last child of the collapsible block or table. This title or caption must always be kept visible (not-collapsible-head: 1). The collapser is inserted in the generated content of the title or caption.

The following example may be used to make a XHTML div collapsible. Note that a XHTML div has no mandatory first or last child. Therefore the collapser must be inserted in the generated content of the div itself.

div {
    display: block;
}

div[class=c3] {
    collapsible: yes;
}

div[class=c3]:before,
div[class=c3]:after {
    content: collapser();
    display: block;
    margin: 5 auto;
    text-align: center;
}

div[class=c3]:after {
    content: collapser();
}

Limitations

A block, marked as being collapsible, can be collapsed only if it contains other blocks or tables. In the above example, an XHTML div of class c3 which just contains text cannot be collapsed. An element styled using "display:table;" is not collapsible per se. The table needs to contain a caption or title of any kind ("display:table-caption;") in order to be made collapsible. In fact, only blocks containing other blocks or tables are potentially collapsible. Adding a caption to a table automatically creates an anonymous block containing both the caption and the table. It is this anonymous block which is collapsible.