User:WikiAdmin/sandbox: Difference between revisions

From Gulf States Flood Help
← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 4: Line 4:
<div class="mw-collapsible">
<div class="mw-collapsible">
<p class="mw-collapsible-content mw-collapsed" style="border: 1px #000 solid;">{{{body|Some text}}}</p>
<p class="mw-collapsible-content mw-collapsed" style="border: 1px #000 solid;">{{{body|Some text}}}</p>
</div>
</div>
== 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 &lt;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>
----
<templatestyles src="User:WikiAdmin/sandbox/styles.css" />
<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!]] &lArr; @@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>
</div>
</div>

Revision as of 09:41, 14 November 2024

Title

First Section

Some text

Divs

Collapsible div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Collapsible div (collapsed by default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Hello World
Content Goes
In Here

Collapsible table with caption

I am a caption!
Hello World
Content Goes
In Here
Same, but without sortability (no explicit <thead>)
Hello World
Content Goes
In Here

Collapsible table (collapsed by default)

Hello World
Content Goes
In Here

Collapsible table in collapsed div

Some text in the div here.

Hello World
Content Goes
In Here

Some more text in the div.

Collapsible table-cell content in a table

X Y Z
Hi, the content in the cell below me is collapsible and collapsed by default 35 91
I'm the mw-collapsible cell content! 42 63

Lists

Collapsible unordered list

  • Lorem
  • Ipsum
  • Dolor

Collapsible ordered list

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

Custom toggles

Pre-made toggle

Page User:WikiAdmin/sandbox/styles.css must have content model "Sanitized CSS" for TemplateStyles (current model is "CSS").

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pre-made toggle with link in it

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Remote collapsible 1 (div, multiple togglers) @

@
Click here or on one of the @'s to expand the hidden element.
title=Click me!
title=Click me!
⇐ @@Clicking here or on At-image will toggle also@@
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom collapsible 2 (table)

Click here to toggle the table.
Hello World
Content Goes
In Here

Custom collapsible 3 (list)

Click here to toggle the list.
  • A
  • B
  • C
  • D

Custom collapsible 4 (table-row)

X Y Z
I'm the mw-customtoggle for A, B and C. Click me to toggle three table-rows at once! 20 11
I'm the mw-customcollapsible row A 20 7
I'm the mw-customcollapsible row B 21 11
I'm the mw-customcollapsible row C 29 1
This is just a plain table cell030

Custom collapsible 5 (double purpose toggle)


I am custom collapsible "DPT".

I am a toggle for my parent ("collapsible div") and custom toggle for "DPT".

I am a collapsible div.


Combination

Combination example

  • Table is collapsed by default
  • Second row contains collapsible list
  • Third row contains a collapsible block with custom labels
Collapse User:WikiAdmin/sandbox
#1

Hello, edit this page Hello, purge this page Hello, add new section to talkpage

#2
  • Lorem
  • Ipsum
  • Dolor
#3

There's a lot more secret content hidden !

This following code is top secret:

kmnd ihwkxucnskdf
Last edited by WikiAdmin on 20241114094134
Permalink to this revision

Custom toggle link placement

A fancy heading

Outer collapsible content.

Lorem ipsum dolor sit amet.

A fancier heading

Inner collapsible content.

Consectetur adipiscing elit.

Retrieved from "http://help.gulfstatesflood.com/mediawiki/index.php?title=User:WikiAdmin/sandbox&oldid=1298"