Editing Help:Collapsing tables and more (section)

==Collapsing by default==
Just using the <code>mw-collapsible</code> class leaves the element expanded by default, but it can be collapsed by the reader. It is also possible to make the element collapsed by default, and optionally expanded by adding other classes along with <code>mw-collapsible</code>. There are several methods for doing this, depending on the situations in which you want the element to collapse. However, content should not be collapsed by default per [[MOS:DONTHIDE]].

==="mw-collapsed"===
Adding the <code>mw-collapsed</code> class will cause the element to {{em|always}} be initially collapsed, no matter what happens around it. It is the simplest method for doing so. Using the examples above:

{| class=wikitable style="width:80%;" align=center
!Code entered!!Output produced
|-
|style="width:50%;"|
<syntaxhighlight lang="wikitext">{| role="presentation" class="wikitable mw-collapsible mw-collapsed"
| <strong>Lorem ipsum</strong>
|-
| Lorem ipsum dolor sit amet
|}</syntaxhighlight>
|style="width:50%;"|
{| role="presentation" class="wikitable mw-collapsible mw-collapsed"
| <strong>Lorem ipsum</strong>
|-
| Lorem ipsum dolor sit amet
|}
|-
|style="width:50%;"|
<syntaxhighlight lang="wikitext">
{| class="wikitable mw-collapsible mw-collapsed"
|+ class="nowrap" | Winter Olympic Games
|-
|
! scope="col" | City
! scope="col" | Country
|-
! scope="row" | 1994
| Lillehammer || Norway
|-
! scope="row" | 1998
| Nagano || Japan
|}
</syntaxhighlight>
|style="width:50%;"|
{| class="wikitable mw-collapsible mw-collapsed"
|+ class="nowrap" | Winter Olympic Games
|-
|
! scope="col" | City
! scope="col" | Country
|-
! scope="row" | 1994
| Lillehammer || Norway
|-
! scope="row" | 1998
| Nagano || Japan
|}
|}

==="autocollapse"===
{{hatnote|Using this technique causes the page to reflow/jump around and should generally be avoided.}}
Adding the <code>autocollapse</code> class causes an element to collapse if there are 2 or more collapsible elements on the page. The example below, therefore, collapses because there are numerous collapsible elements on this page.

{| class=wikitable style="width:80%;" align=center
!Code entered!!Output produced
|-
|style="width:50%;"|
<syntaxhighlight lang="wikitext">{| role="presentation" class="wikitable mw-collapsible autocollapse"
| <strong>Lorem ipsum</strong>
|-
| Lorem ipsum dolor sit amet
|}</syntaxhighlight>
|style="width:50%;"|
{| role="presentation" class="wikitable mw-collapsible autocollapse"
| <strong>Lorem ipsum</strong>
|-
| Lorem ipsum dolor sit amet
|}
|}

==="innercollapse" and "outercollapse"===
{{hatnote|Using this technique causes the page to reflow/jump around and should generally be avoided.}}
Using this pair of classes, it is possible to make an element collapsed by default only when it is {{em|contained within}} a particular outer element. An element with the <code>mw-collapsible</code> and <code>innercollapse</code> classes is collapsed by default if it is contained within an element with the <code>outercollapse</code> class; otherwise, it is uncollapsed by default. This is mainly useful for templates, which are often nested.

{| class=wikitable style="width:80%;" align=center
!Code entered!!Output produced
|-
|style="width:50%;"|
<syntaxhighlight lang="wikitext">
{| role="presentation" class="wikitable mw-collapsible innercollapse"
| This <code>innercollapse</code> element is
|-
| <em>uncollapsed</em> by default
|}

<div class="wikitable outercollapse" style="padding:1em; background:#ccc;">
This is an element with the <code>outercollapse</code> class.

{| role="presentation" class="wikitable mw-collapsible innercollapse"
| This <code>innercollapse</code> element is
|-
| <em>collapsed</em> by default
|}
</div>
</syntaxhighlight>
|style="width:50%;"|
{| role="presentation" class="wikitable mw-collapsible innercollapse"
| This <code>innercollapse</code> element is
|-
| <em>uncollapsed</em> by default
|}

<div class="wikitable outercollapse" style="padding:1em; background:#ccc;">
This is an element with the <code>outercollapse</code> class.

{| role="presentation" class="wikitable mw-collapsible innercollapse"
| This <code>innercollapse</code> element is
|-
| <em>collapsed</em> by default
|}
</div>
|}