Editing 2swagg wiki:Collapsing objects (section)

===mw-customtoggle===
Another method replies on adding a customized <code>mw-customtoggle-</code> class to the element serving as a toggle link or button and add a customized <code>mw-customcollapsible-</code> id to the collapsible content. This method allow the toggle link to be anywhere on the webpage and to be stylized by users.

<pre style="white-space:pre-wrap;">
<span class="mw-customtoggle-customtoggle01" style="color:hotpink; font-weight:bold; cursor:pointer;">[Toggle link]</span>

<div id="mw-customcollapsible-customtoggle01" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Content</div>
</pre>

<span class="mw-customtoggle-customtoggle01" style="color:hotpink; font-weight:bold; cursor:pointer;">[Toggle link]</span>

<div id="mw-customcollapsible-customtoggle01" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Content</div>

====Custom toggle link with toggleable text====
In order to have the toggle link or button change with each click, have a separate element for the "show" link and a separate element for the "hide" link and add the <code>collapsibletoggletext</code> to them. If you want the content to be initially non-collapsed by default, add the <code>hiddentext</code> class to the "show" link. If you want the content to be initially collapsed by default, add the <code>hiddentext</code> class to the "hide" link and add the <code>mw-collapsed</code> class to the content that is initially collapsed. Have a container element with the <code>collapsibletoggle</code> surround the "show" and "hide" links.

The following is an example of a collapsible object that is initially non-collapsed by default:

<pre style="white-space:pre-wrap;">
<span class="mw-customtoggle-customtoggle02 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext hiddentext">[Show content]</span><span class="collapsibletoggletext">[Hide content]</span></span>

<div id="mw-customcollapsible-customtoggle02" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>
</pre>

<span class="mw-customtoggle-customtoggle02 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext hiddentext">[Show content]</span><span class="collapsibletoggletext">[Hide content]</span></span>

<div id="mw-customcollapsible-customtoggle02" class="mw-collapsible" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>

The following is an example of a collapsible object that is initially collapsed by default:

<pre style="white-space:pre-wrap;">
<span class="mw-customtoggle-customtoggle03 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext">[Show content]</span><span class="collapsibletoggletext hiddentext">[Hide content]</span></span>

<div id="mw-customcollapsible-customtoggle03" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>
</pre>

<span class="mw-customtoggle-customtoggle03 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext">[Show content]</span><span class="collapsibletoggletext hiddentext">[Hide content]</span></span>

<div id="mw-customcollapsible-customtoggle03" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>