View source for User talk:Poke/CollapsibleTables.js

== Description ==
This class allows to make tables collapsible and adds a show/hide button to affected tables. Tables which class attribute contains <code>collapsible</code> or <code>expandable</code> are affected by this class and can be collapsed; the latter automatically hides the content of all sections.<br />
''Header rows'' are used to divide the table into sections which can be collapsed separately. By default the first row of the table is interpreted as a header row, however this can be overwritten by adding <code>collapsible</code> to the class attribute of header rows. You can also hide a section individually by default when in <code>collapsible</code> mode by using <code>expandable</code> as the row's class name instead.

=== Usage examples ===
:''Note: Style information are not shown in the code column.''
{| style="width: 100%; border: 1px solid silver;" cellspacing="2"
|- style="background: silver;"
! style="width: 50%;" | Code
! style="width: 50%;" | Result
|-

| <pre>
{| class="collapsible"
! Table title
|-
| Table content
|}
</pre>
|
{| class="collapsible" style="border: 1px solid silver; width: 90%; margin: auto;"
! style="background: #EEE;" | Table title
|-
| Table content
|}
|-

| <pre>
{| class="expandable"
! Table title
|-
| Table content
|}
</pre>
|
{| class="expandable" style="border: 1px solid silver; width: 90%; margin: auto;"
! style="background: #EEE;" | Table title
|-
| Table content
|}
|-

| <pre>
{| class="collapsible"
! Table title
|- class="collapsible"
! Subtitle 1
|-
| Subtable content
|- class="expandable"
! Subtitle 2
|-
| Subtable content
|}
</pre>
|
{| class="collapsible" style="border: 1px solid silver; width: 90%; margin: auto;"
! style="background: #DDD;" | Table title
|- class="collapsible"
! style="background: #EEE;" | Subtitle 1
|-
| Subtable content
|- class="expandable"
! style="background: #EEE;" | Subtitle 2
|-
| Subtable content
|}

|}