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 |
|
collapsed | yes | no | no |
|
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 Special value |
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)); }
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.