Collapsible information, navigation, or other boxes can be created as explained below.
Either tables or <div> elements can be used to create collapsible boxes.
In the case of tables, the first row will always be shown, and every other row can be either hidden or shown. The [hide] and [show] links will be in the first cell of the first row, so it is recommended that the first cell span all columns.
In the case of <div> elements, the box should be arranged as an outer <div> containing two or more inner <div> elements. The [hide] and [show] links will be in the first inner <div>, and the remaining inner <div> elements can be either hidden or shown. See the working illustration at right, which has margins and borders around each inner <div> for clarity.
Collapsible boxes can also be set to be collapsed by default, or collapsed by default if there are more than two collapsible boxes on the page. These can be controlled by means of applying class names to the boxes.
- The class name collapsible makes the box collapsible.
- The additional class name collapsed makes the box collapsed by default.
- The additional class name autocollapse makes the box collapsed by default if there are more than two collapsible boxes on the page.
For ease of use (to avoid the show/hide button moving around), it is recommended that collapsible boxes be given a fixed width.
The following box is collapsed by default.
Differences from Wikipedia
With Wikipedia's collapsible tables, there needs to be a header row (<th>). This is not required here.
With Wikipedia's collapsible <div> boxes, the header and collapsible sections need their own class names. This is not required here.