User:Ssolbergj/sandbox13

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.

 Collapsible table 

Collapsible table in collapsed div
Some text in the div here. Some more text in the div.

Collapsible unordered list
 Lorem Ipsum Dolor 

 Collapsible ordered list 

 One Two is more than one ..a total of three items! 

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) @ 


 * @

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.

 <li>A <li>B <li>C <li>D </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>Second row contains collapsible list <li>Third row contains a collapsible block with custom labels </ul>

 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>Second row contains collapsible list <li>Third row contains a collapsible block with custom labels </ul>