Manual:Collapsible elements/Demo/Advanced

Divs
Collapsible div 



 Collapsible div (collapsed by default) 

 Collapsible div nested in collapsed div 

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

Tables
 Collapsible table 

 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

Lists
 Collapsible unordered list 

 Lorem Ipsum Dolor 

 Collapsible ordered list 

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

Custom toggles
 Pre-made toggle

<templatestyles src="Manual:Collapsible elements/Demo/Advanced/styles.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"> A</li> B</li> C</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
 Combination example 

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