11. Collapsible blocks and tables
Prev | Chapter 4. Other extensions | Next

## 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

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 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-foot | non-negative integer | 0 | Number 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-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.
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(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.

Prev | Up | Next
10. Making a table look like a spreadsheet | Home | 12. Styling comments and processing instructions