Help:Collapsed section

All pages with multiple collapsed sections must have a place to "toggle all" to expand all sections at once. This is primarily to make word searching effective. A browser word search on a page (using CTRL+F) will not find text while it is collapsed.

Creating a Collapsed Section

For the purpose of easy explanation, we will be using <span> tags, but this can also be applied to any type of tag, such as <div> and also tables. Reference pages that are more in depth and technical can be found here and here.

<span class="mw-customtoggle-1" style="color:#0000ff">Click to view more...</span>

The code above is called a custom toggle and sets the text to click on to expand the collapsed section. This can be any text ("Click to view more..." is just the example) in any color (do NOT use white or any color that hides the click text in the background). It can also be an image. The code above appears as follows (toggle function removed intentionally):

Click to view more...

The code class="mw-customtoggle-1" sets that span as the toggle for the custom collapsible section called "1". Each collapsible section on a page must have a unique name or the sections will not toggle independently. The 1 can be changed to anything, but please do not use gibberish. Numbering each section as "1", "2", "3", etc. makes it easy; referring to content is fine as well.

The next tag will be set around the collapsed section, which can have formatting such as <pre{{log2}}> in it, but some uses of code within the collapsed section, or using a collapsed section tag within another tag, might call for using a different tag than <span> (detailed below). This tag should be placed immediately following the previous tag, or very close to it (e.g. a line or two below, it depends on other formatting code).

<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">

The code id="mw-customcollapsible-1" identifies that collapsible section as "1", which matches the name for the toggle code immediately before it. These identifiers have to match for the toggle to control the collapse. The closing </span> tag should go at the end of the collapsed section.

Putting the two tags together:

<span class="mw-customtoggle-1" style="color:#0000ff">Click to view more...</span>

<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">
Collapsing text is fun</span>

Appears as:

Click to view more...

Collapsing text is fun.

Now let's add a second section.

<span class="mw-customtoggle-2" style="color:#0000ff">Click to view more...</span>

<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-2">
GSWiki helped me learn to code</span>

Appears as:

Click to view more...

GSWiki helped me learn to code.

Creating a Toggle All

Now that there is more than one collapsed section, there needs to be a toggle all at the top of the page. A good example page to look at is Swan Song. The code is identical to creating a toggle for one section, but all of the mw-customtoggle-# on the page are listed.

<span class="mw-customtoggle-1 mw-customtoggle-2" style="color:#0000ff">'''Toggle all content</span>

Appears as:

Toggle all content

You can see the two samples in the previous section expand when clicking on the text just above. Click it a second time to hide them.

Advanced Collapsing

This article is a work in progress!

Since collapsing is used to hide large amounts of code/text, it is useful to look at some more detailed examples.

Containing a Pre Tag

A very common tag that is used on GSWiki is <pre{{log2}}>. When this appears within the collapsed section, it is better to use a <div> instead of a <span> as the collapsed section. When the collapsed section is within a <pre{{log2}}>, using <span> is better.