User:Jdlrobson/sandbox-collapsible

Expanded by default
Always visible

Collapsed by default
Always visible

Old
 Collapsible table with caption 

 Collapsible table (collapsed by default) 

 Collapsible table in collapsed div 

Some text in the div here. Some more text in the div.

 Collapsible table-cell content in a table

 Collapsible unordered list 

 Lorem Ipsum Dolor 

 Collapsible ordered list 

 One Two is more than one ..a total of three items!</li> </ol>

 Pre-made toggle


 * Note: This depends on some CSS in MediaWiki:Vector.css



<big id="h-pre-made-toggle-with-link"> Pre-made toggle with link in it

This is a toggle with link to the top of the page

 Remote collapsible 1 (div, multiple togglers) <sup class="mw-customtoggle-myDivision" style="color:orange">@ 


 * <strong class="mw-customtoggle-myDivision">@

Click here or on one of the @'s to expand the hidden element.

&lArr; @@Clicking here or on At-image will toggle also@@

 Custom collapsible 2 (table)

Click here to toggle the table.

 Custom collapsible 3 (list)

Click here to toggle the list.

<ul class="mw-collapsible" id="mw-customcollapsible-myList"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul>

 Custom collapsible 4 (table-row)

 Custom collapsible 5 (double purpose toggle)

I am custom collapsible "DPT".

<span class="mw-collapsible-toggle mw-customtoggle-DPT" style="cursor: pointer; border: 1px solid #aaa; border-radius: 5px; padding: 2px;">I am a toggle for my parent ("collapsible div") and custom toggle for "DPT". I am a collapsible div.

 Combination example 

<ul class="mw-collapsible mw-collapsed" data-collapsetext="I understand" data-expandtext="Click here for more information"> <li>Table is collapsed by default</li> <li>Second row contains collapsible list</li> <li>Third row contains a collapsible block with custom labels</li> </ul>

investigating
<big id="head-collapsible_table"> Collapsible table 

fixable
<big id="head-colapsible_div_nested_in_collapsed_div"> Collapsible div nested in collapsed div 

Hi there this is text in the outer div. This content is inside the nested collapsible div.

unsupported
We do not support custom collapse labels  Collapsible div 

<div class="mw-collapsible" data-collapsetext="You may collapse me by clicking here" data-expandtext="Let me back out !"> Sample content

You must have a collapsible content div.

 Collapsible div (collapsed by default)