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. Unless it is a spoiler, having text visible when the page is opened is preferred; however, for repeated information that is inserted via LST--for example the material difficulty tables on the Enchant Item (925) and Ensorcell (735) pages that takes up a lot of space--pre-collapsing the information is appropriate.

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. If one type of tag is not working, try another. 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

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

Collapsed Table

The following will put a collapse option on the top left of a table. It can be combined with other class options, such as wikitable and sortable, by putting a space between each one in the class quotes.

{| class="mw-collapsible"

To pre-collapse a table:

{| class="mw-collapsible mw-collapsed"

Please note the preference above for having information being visible on the page when loaded, with some exceptions.

Collapsible tables can be formatted to allow for custom toggles which will allow them, much like collapsed sections, to be expanded with a "toggle all." In order for this to work properly, the table should be formatted with a toggle id. Note, the toggle id is similar to that of a regular collapsed section.

{| class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1"

From there, the table should be captioned. This caption will serve as the tables "toggle" to collapse or expand it. Note, for the purpose of accessibility, role="link" must be used to highlight the toggle in the caption.

|+ style="white-space:nowrap; text-align:left;" | To view the lists of potential titles, click <span class="mw-customtoggle-1" role="link" style="color:#0000ff">'''here'''</span>.

Example

To view the collapsed table, click here.

I learned how to make a toggle for a collapsed table

Additional examples can be viewed on the Duskruin page.

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.

Custom Toggle Changing Collapse/Expand Text

After October 2017, there is no built in way to have differing text on a Custom Toggle like there are with other toggles attached to collapsible sections (e.g. "Collapse" changes to "Expand" and vice versa when the toggle is clicked). To workaround this, create another custom toggle span that is collapsed and have the two control each other and themselves. As seen on the Forging page:

<span class="mw-collapsible" id="mw-customcollapsible-2"> 
[<span class="mw-customtoggle-1 mw-customtoggle-2 mw-customtoggle-3" style="color:#0000ff">Click to view original '''Forging Guide''' (introductory material)</span>]</span><span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-3">[<span class="mw-customtoggle-1 mw-customtoggle-2 mw-customtoggle-3" style="color:#0000ff">Click to view full article</span>]</span>

On the Forging page everything gets expanded or collapsed at the same time, and there are no other toggle functions, so all of the sections in the article are named "1". "2" is the initial toggle display that is initially not collapsed, and "3" is the toggle display that appears when "2" is clicked, and is initially collapsed.