Toggle Display

The Toggle Display button on the TNG Wiki Edit menu allows you to define text that can be displayed or hidden (i.e. expanded or collapsed) by users. The button generates Wikitext with two HTML div elements.

1. The outer div can contain lead-in text that does not collapse.
2. The inner div contains the collapsible text, which is displayed in a shaded box.

The button also automatically generates a [Collapse] link before the collapsible text. When you click on the [Collapse] link, the collapsible text disappears, and the link changes to [Expand].

The Toggle button always generates this text in the outer div:

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.

If you have selected text before you click the Toggle button, that selected text will become the collapsible text. If you have not, the Toggle button will generate some help text as the collapsible text.

After you click the Toggle button, you simply need to replace the text generated by the Toggle button with your text. Note that the Toggle button leaves the collapsible text highlighted so that you can very easily delete and replace it.

As an alternative to the Toggle Display button, you can use the Show / Hide Display buttons to generate the wiki syntax to create the Expand and Collapse buttons. The Show / Hide Display buttons generate a Show or Hide Contents button which can be changed to different text.

Creating a toggle

When you click the Toggle button without having selected any text, you'll get this Wikitext:

<div class='mw-collapsible'>You can click on the  '''[Collapse]''' link on the right to hide this section or '''[Expand]''' to display the hidden section. 
<div class='toccolours mw-collapsible-content'>Add the text to be toggled here. Note that 
* If you add the class 'mw-collapsed' to the div at the start of this structure, the text will be hidden initially, not displayed. 
* See '''[[Toggle Display]]'' for examples.</div></div>

Example 1: The default Toggle:

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.

Add the text to be toggled here. Note that

• If you add the class 'mw-collapsed' to the div at the start of this structure, the text will be hidden initially, not displayed.
• See 'Toggle Display for examples.

Creating a toggle with selected text

If you select any text prior to clicking the Toggle button, the selected text will become the collapsible text, though you'll still get the introductory message ("You can click on the [Collapse] link..."). It will look like this:

Example 2: A toggle with custom collapsible text:

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.

This is the selected text

To start with collapsed text

To start with the [Expand] link and the collapsible text collapsed, just add the class mw-collapsed to either of the div tags generated by the button. Assuming that you've changed the outer and inner text, too, you'll get something like this:

<If you select any text prior to clicking the Toggle button, the selected text will become the collapsible text, though you'll still get the introductory message ("You can click on the [Collapse] link..."). It will look like this:

Example 3: A toggle that is collapsed to start:

The reasons it came out this way are quite interesting...

Yep, this is quite an interesting story.

If there is no fixed text

You can omit the outer div, as long as you add the class mw-collapsible to the inner div. You'll wind up with Wikitext that is something like this:

<div class='mw-collapsible toccolours mw-collapsible-content'>This is the collapsible text...
</div>

Collapsible text shading

In the Wikitext generated by the Toggle button, the class toccolor adds padding, a border, and a background color to the collapsible text. You can remove that class name, and/or add style attributes to either or both divs to change the styling:

To change 'Collapse' and 'Expand'

To change the text of the [Collapse] and/or [Expand] links, you can add data-collapsetext and data-expandtext attributes to the outer div, like this:

<div class="mw-collapsible" data-expandtext="show" data-collapsetext="hide">

or perhaps

<div class="mw-collapsible" data-expandtext="See details">

Example 4: Alternate text for the [Expand] link, with the collapsible text unshaded and collapsed to start:

You can change the text of the [Collapse] and/or [Expand] links

by adding the data-collapsetext and data-expandtext attributes to the outer div, like this

<div class="mw-collapsible" data-expandtext="show" data-collapsetext="hide">

Complex Collapsible Text

Example 4, just above, illustrates that the collapsible text can contain <code> and <syntaxhighlight> elements. It can also contain lists, tables, and other markup. The MediaWiki Manual Page for collapsible elements gives some examples.

Divs, Spans, etc

The Toggle button generates two div elements, but the toggle functionality does not require that the elements (or one element if you merge them as described above) be divs. Depending on their content, one or the other (or both) elements can be <span>, or other HTML tags - limited, of course, to the HTML tags that can be used in Wikitext.

See Also

Show / Hide Contents
Help:Editing
The MediaWiki Manual Page for collapsible elements