User:WikiAdmin/collapsibles: Difference between revisions
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..." |
No edit summary |
||
| 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}} | |||
Latest revision as of 16:50, 5 December 2024
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
| Hello | World |
|---|---|
| Content | Goes |
| In | Here |
| 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
- One
- Two is more than one
- ..a total of three items!
Custom toggles
Pre-made toggle
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
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) @
- @
Custom collapsible 2 (table)
| Hello | World |
|---|---|
| Content | Goes |
| In | Here |
Custom collapsible 3 (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 cell | 0 | 30 |
Custom collapsible 5 (double purpose toggle)
I am custom collapsible "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/collapsibles | ||
|---|---|---|
| #1 |
Hello, edit this page Hello, purge this page Hello, add new section to talkpage |
|
| #2 |
|
|
| #3 |
There's a lot more secret content hidden ! This following code is top secret:
|
|
| Last edited by WikiAdmin on 20241205165023 | ||
| 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.