11. Collapsible blocks and tables

Elements with display: block or display: 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

PropertyValueInitial valueDescription
collapsibleyes | nono
yes

block or table can be collapsed and expanded

no

block or table cannot be collapsed and expanded

collapsedyes | nono
yes

block or table is initially collapsed

no

block or table is initially expanded

not-collapsible-headnon-negative integer0Number of graphical items (gadgets) at the beginning of the block or table which must be kept visible even if the block or table is collapsed.
not-collapsible-footnon-negative integer0Number of graphical items (gadgets) at the end of the block or table which must be kept visible even if the block or table is collapsed.
collapsed-contentsame as property contentno 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.

Caution

Do not specify label() or indicator() as a value for collapsed-content. Instead specify xpath().

collapsed-content-alignauto|left|center|rightauto

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(collapsed-icon, icon(collapsed-left),
                       expanded-icon, icon(expanded-up));
}

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.