IWEWrestling2012 at 22:47, 4 April 2016

2016-04-04T22:47:35Z

IWEWrestling2012: Created page with '{{helpbox}} A '''collapsible table''' is a special kind of table whose contents can be hidden.
The basic collapsible table has at least one element with content, and a header…'

2016-04-04T22:46:54Z

Created page with '{{helpbox}} A '''collapsible table''' is a special kind of table whose contents can be hidden.<br> The basic collapsible table has at least one element with content, and a header…'

New page

{{helpbox}}
A '''collapsible table''' is a special kind of table whose contents can be hidden.<br>
The basic collapsible table has at least one element with content, and a header. The header is not hideable, and should describe the contents within the table.

====Simple example====
To make a table "collapsible", you merely need to set the table's class as '''<code>collapsible</code>'''. For a [show] or [hide] link to appear, the table's first row must be a header row, i.e. begin (in wikisyntax) with an exclamation mark (no header row means no text gets hidden, either). The use of the class <code>toccolours</code> in the example below is merely for appearance; it is not needed for collapsing to function:
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>
{| class="toccolours collapsible" width="250"
!colspan="2"| This header never disappears.
|-
| This column... || ...and this column can be collapsed.
|}
</pre>
|
{| class="toccolours collapsible" width="250"
!colspan="2"| This header never disappears.
|-
| This column... || ...and this column can be collapsed.
|}
|-
|}
One-element example, initially expanded:
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>
{| class="collapsible" border=1 width="250"
!Never disappearing header
|-
|Text to appear/disappear
|}
</pre>
|
{| class="collapsible" border=1 width="250"
!Never disappearing header
|-
|Text to appear/disappear
|}
|-
|}

====Auto-collapsing tables====
You have two choices of auto-collapse. In addition to the <code>collapsible</code> class, you can add either '''<code>collapsed</code>''' or '''<code>autocollapse</code>'''. The first always initially collapses a table. <code>autocollapse</code> only initially collapses a table if there are at least two collapsible tables on a page.
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>{| class="toccolours collapsible autocollapse" width="250"
|-
! colspan="2" align="left" | This autocollapse table
will initially collapse because there are at least
two collapsible tables on this page.
|-
| Column A || Column B
|}
</pre>
|
{| class="toccolours collapsible autocollapse" width="250"
|-
! colspan="2" align="left" | This autocollapse table will initially collapse because there are at least two collapsible tables on this page.
|-
| Column A || Column B
|}
|-
|}
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>{| class="toccolours collapsible collapsed" width="250"
|-
! colspan="2" | This table will always initially collapse
|-
| Column A || Column B
|}</pre>
|
{| class="toccolours collapsible collapsed" width="250"
|-
! colspan="2" | This table will always initially collapse
|-
| Column A || Column B
|}
|-
|}
One-element example, initially collapsed:
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>{| class="collapsible collapsed" width="250" border=1
!Never disappearing header
|-
|Text to appear/disappear
|}</pre>
|
{| class="collapsible collapsed" width="250" border=1
!Never disappearing header
|-
|Text to appear/disappear
|}
|-
|}
====Sortable collapsible tables====
Collapsible tables can also be sorted using the "wikitable sortable" class. When you click an arrow at the top of a column, the contents of the column are shuffled appropriately. See the following example:
{| border=1 width="60%"
!initially expanded!!initially collapsed
|- width="50% valign="top" align="center"
|
{|class="collapsible" width="250"
!numbers
|- width="50%"
|
{|class="wikitable sortable"
!name!!number
|-
|a||123
|-
|b||6
|-
|c||45
|}
|}
|
{|class="collapsible collapsed" width="250"
!numbers
|-
|
{|class="wikitable sortable"
!name!!number
|-
|a||123
|-
|b||6
|-
|c||45
|}
|}
|}
For additional help on sorting, see [[Wikipedia:Help:Sorting|Help:Sorting on Wikipedia]].

== Notes ==
=== Browser Notes ===
The collapsible tables code works best with IE or Opera. To ensure that it works correctly with Mozilla Firefox, remember to specify the width of the table. Tables which are initially collapsed in Firefox require the show link to be clicked twice in order to open if the width is not specified. In such cases, it is best to specify the desired width necessary for viewing when expanded.

=== Implementation notes ===
Having the collapsing text on the same line or no header at all is not desired, so that is why an unhideable header row is required. Without a header row, there is a large potential for abuse since nothing would be known about the contents of the table.
<br>Also, the show/hide links are hard coded because being able to change the link would essentially let users make the link hidden, which is also undesirable. Having large amounts of unviewable text is a reason some search engines delete sites from their listings.

==See also==
* [[Help:Editing#Tables]]

[[Category:Help]]

Help:Collapsing - Revision history

IWEWrestling2012 at 22:47, 4 April 2016

IWEWrestling2012: Created page with '{{helpbox}} A '''collapsible table''' is a special kind of table whose contents can be hidden. The basic collapsible table has at least one element with content, and a header…'

IWEWrestling2012: Created page with '{{helpbox}} A '''collapsible table''' is a special kind of table whose contents can be hidden.
The basic collapsible table has at least one element with content, and a header…'