WikiAdmin at 23:50, 5 December 2024

2024-12-05T23:50:23Z

← Older revision		Revision as of 16:50, 5 December 2024
Line 315:		Line 315:
	</div>		</div>
	</div>		</div>


			<div class="sol-tlm-hdr mw-customtoggle-{{{num\|1}}}">{{{title\|Title Heading}}}</div>
			<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-{{{num\|1}}}">
			<div class="mw-collapsible-content">{{{content\|{{Sample content}}}}}</div>
			</div><div style="clear:both"></div>

			[[User:WikiAdmin/sandbox/1]]

			<div class="usermessage mw-customtoggle-2">Click here to expand the hidden element.</div>
			<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-2">
			<div class="toccolours mw-collapsible-content">{{Sample content}}</div>
			</div><div style="clear:both"></div>


			{{FIM\|102}}

WikiAdmin: Created page with "== Divs == '''Collapsible div ''' ----
{{Sample content}}

''' Collapsible div (collapsed by default) ''' ----
{{Sample content}}

''' Collapsible div nested..."

2024-11-14T17:54:49Z

Created page with "== Divs == <big>'''Collapsible div '''</big> ---- <div class="mw-collapsible" data-collapsetext="You may collapse me by clicking here" data-expandtext="Let me back out !"> {{Sample content}} </div> <div style="clear:both"></div> <big>''' Collapsible div (collapsed by default) '''</big> ---- <div class="mw-collapsible mw-collapsed"> {{Sample content}} </div> <div style="clear:both"></div> <big id="head-colapsible_div_nested_in_collapsed_div">''' Collapsible div nested..."

New page

== Divs ==
<big>'''Collapsible div '''</big>
----
<div class="mw-collapsible" data-collapsetext="You may collapse me by clicking here" data-expandtext="Let me back out !">
{{Sample content}}
</div>

<div style="clear:both"></div>

<big>''' Collapsible div (collapsed by default) '''</big>
----
<div class="mw-collapsible mw-collapsed">
{{Sample content}}
</div>

<div style="clear:both"></div>

<big id="head-colapsible_div_nested_in_collapsed_div">''' Collapsible div nested in collapsed div '''</big>
----
<div class="mw-collapsible mw-collapsed" style="background-color:#f9f9f9">
Hi there this is text in the outer div.
<div class="mw-collapsible" style="background:#f9f9f9">
This content is inside the nested collapsible div.
</div>
</div>

<div style="clear:both"></div>

== Tables ==
<big id="head-collapsible_table">''' Collapsible table '''</big>
----
{| class="wikitable sortable mw-collapsible"
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}

<div style="clear:both"></div>

<big id="head-collapsible-table-w-caption">''' Collapsible table with caption '''</big>
----
{| class="wikitable sortable mw-collapsible"
|+ I am a caption!
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}
{| class="wikitable mw-collapsible"
|+ Same, but without sortability (no explicit <thead>)
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}

<div style="clear:both"></div>

<big>''' Collapsible table (collapsed by default) '''</big>
----
{| class="wikitable mw-collapsible mw-collapsed"
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}

<div style="clear:both"></div>

<big>''' Collapsible table in collapsed div '''</big>
----
<div class="mw-collapsible mw-collapsed">
Some text in the div here.
{| class="wikitable sortable mw-collapsible"
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}
Some more text in the div.
</div>

<div style="clear:both;"></div>

<big>''' Collapsible table-cell content in a table'''</big>
----

<table class="wikitable">
<tr>
<th>X</th> <th>Y</th> <th>Z</th>
</tr>
<tr>
<td>Hi, the content in the cell below me is collapsible and collapsed by default</td> <td>35</td> <td>91</td>
</tr>
<tr>
<td class="mw-collapsible mw-collapsed">I'm the mw-collapsible cell content!</td> <td>42</td> <td>63</td>
</tr>
</table>

<div style="clear:both"></div>

== Lists ==
<big id="head-collapsible-ul">''' Collapsible unordered list '''</big>
----
<ul class="mw-collapsible">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>

<div style="clear:both"></div>

<big id="head-collapsible-ol">''' Collapsible ordered list '''</big>
----
<ol class="mw-collapsible">
<li>One</li>
<li>Two is more than one</li>
<li>..a total of three items!</li>
</ol>

<div style="clear:both"></div>

== Custom toggles ==
<big>''' Pre-made toggle'''</big>
----

<div id="collapse-pre-one" class="mw-collapsible"><div class="mw-collapsible-toggle toccolours" style="float: none;"><span class="down">[[File:Arrow-down-dash-2.0.svg|50px|center|link=]]</span><span class="up">[[File:Arrow-up-dash-2.0.svg|50px|center|link=]]</span></div>
<div class="mw-collapsible-content">
{{Sample content}}
</div></div>

<div style="clear:both"></div>

<big id="h-pre-made-toggle-with-link">''' Pre-made toggle with link in it'''</big>
----
<div class="mw-collapsible"><div class="mw-collapsible-toggle toccolours" style="float: none;">This is a toggle with link to [[#top|the top of the page]]</div>
<div class="mw-collapsible-content">
{{Sample content}}
</div></div>

<div style="clear:both"></div>

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

:<strong class="mw-customtoggle-myDivision">@</strong>

<div class="usermessage mw-customtoggle-myDivision">Click here or on one of the @'s to expand the hidden element.</div>

<div class="mw-customtoggle-myDivision" style="cursor:pointer">[[File:At_char.svg|100px|left|link=|title=Click me!]] ⇐ @@Clicking here or on At-image will toggle also@@<div style="clear:both"></div></div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">{{Sample content}}</div>
</div>

<div style="clear:both"></div>

<big>''' Custom collapsible 2 (table)'''</big>
----

<div class="usermessage mw-customtoggle-myTable">Click here to toggle the table.</div>

{| class="wikitable sortable mw-collapsible" id="mw-customcollapsible-myTable"
! Hello
! World
|-
| Content
| Goes
|-
| In
| Here
|}

<div style="clear:both"></div>

<big>''' Custom collapsible 3 (list)'''</big>
----

<div class="usermessage mw-customtoggle-myList">Click here to toggle the list.</div>

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

<div style="clear:both"></div>

<big>''' Custom collapsible 4 (table-row)'''</big>
----

<table class="wikitable">
<tr>
<th>X</th> <th>Y</th> <th>Z</th>
</tr>
<tr>
<td><span class="mw-customtoggle-AA mw-customtoggle-BB mw-customtoggle-CC">I'm the mw-customtoggle for A, B and C. Click me to toggle three table-rows at once!</span></td> <td>20</td> <td>11</td>
</tr>
<tr id="mw-customcollapsible-AA" class="mw-collapsible mw-collapsed">
<td>I'm the mw-customcollapsible row A</td> <td>20</td> <td>7</td>
</tr>
<tr id="mw-customcollapsible-BB" class="mw-collapsible mw-collapsed">
<td>I'm the mw-customcollapsible row B</td> <td>21</td> <td>11</td>
</tr>
<tr id="mw-customcollapsible-CC" class="mw-collapsible mw-collapsed">
<td>I'm the mw-customcollapsible row C</td> <td>29</td> <td>1</td>
</tr>
<tr>
<td>This is just a plain table cell</td><td>0</td><td>30</td>
</tr>
</table>

<big>''' Custom collapsible 5 (double purpose toggle)'''</big>
----

<div class="toccolours">
<div class="mw-collapsible toccolours" id="mw-customcollapsible-DPT">
I am custom collapsible "DPT".
</div>

<div class="mw-collapsible toccolours"><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".</span>
<div class="mw-collapsible-content">
I am a collapsible div.
</div>
</div>
</div>

<div style="clear:both"></div>

== Combination ==
<big>''' Combination example '''</big>
----
<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>

{| class="wikitable plainlinks mw-collapsible mw-collapsed"
!colspan="3" | <strong class="mw-collapsible-toggle mw-collapsible-toggle-expanded" style="color:#FF00EE;float:none">Collapse</strong> '''{{FULLPAGENAME}}'''
|-
|width="14%" | #1
|
Hello, [{{fullurl:{{FULLPAGENAME}}|action=edit}} edit this page]
Hello, [{{fullurl:{{FULLPAGENAME}}|action=purge}} purge this page]
Hello, [{{fullurl:{{TALKPAGENAME}}|action=edit&section=new}} add new section to talkpage]
|width="14%"| [[File:Example.svg|25x25px]]
|-
|width="14%" | #2
|
<ul class="mw-collapsible">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
|width="14%"| [[File:Example.svg|25x25px]]
|-
|width="14%" | #3
|
There's a lot more secret content hidden !
<div style="background:red" class="mw-collapsible mw-collapsed" data-collapsetext="Hide me" data-expandtext="Reveal me">
'''This following code is top secret:'''<br />
: ''kmnd ihwkxucnskdf''
</div>
|width="14%"| [[File:Example.svg|25x25px]]
|-
|colspan=3 style="text-align:center"|Last edited by [[User:{{REVISIONUSER}}|{{REVISIONUSER}}]] on {{REVISIONTIMESTAMP}}
|-
|colspan=3 style="text-align:center"|[{{fullurl:{{FULLPAGENAME}}|oldid={{REVISIONID}}}} Permalink to this revision]
|}

== Custom toggle link placement ==
<div class="mw-collapsible">
<h2>
<span style="color: purple">A fancy heading</span>
<div class="mw-collapsible-toggle-placeholder"></div>
</h2>
<div class="mw-collapsible-content">
<p>Outer collapsible content.</p>
<p lang="la">Lorem ipsum dolor sit amet.</p>
<div class="mw-collapsible">
<h3>
<span style="color: purple">A fancier heading</span>
<div class="mw-collapsible-toggle-placeholder"></div>
</h3>
<div class="mw-collapsible-content">
<p>Inner collapsible content.</p>
<p lang="la">Consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>

User:WikiAdmin/collapsibles - Revision history

WikiAdmin at 23:50, 5 December 2024

WikiAdmin: Created page with "== Divs == '''Collapsible div ''' ---- {{Sample content}} ''' Collapsible div (collapsed by default) ''' ---- {{Sample content}} ''' Collapsible div nested..."

WikiAdmin: Created page with "== Divs == '''Collapsible div ''' ----
{{Sample content}}

''' Collapsible div (collapsed by default) ''' ----
{{Sample content}}

''' Collapsible div nested..."