User:Krinkle/Test suite for mw-collapsible

From Wikipedia!
Jump to: navigation, search

Collapsible div

Example image

Lorem ipsum dolor sit amet, consectetur adipisicing 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..

Header Top
Con Tent

Collapsible div (collapsed by default)

Example image

Lorem ipsum dolor sit amet, consectetur adipisicing 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..

Header Top
Con Tent

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

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

Collapsible unordered list

  • Lorem
  • Ipsum
  • Dolor

Collapsible ordered list

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

Pre-made toggle

Note: This depends on some CSS in MediaWiki:Vector.css
Arrow-down-dash-2.0.svg
Arrow-up-dash-2.0.svg
Example image

Lorem ipsum dolor sit amet, consectetur adipisicing 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..

Header Top
Con Tent

Pre-made toggle with link in it

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

Lorem ipsum dolor sit amet, consectetur adipisicing 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..

Header Top
Con Tent

Remote collapsible 1 (div, multiple togglers) @

@
Click here or on one of the @'s to expand the hidden element.
title=Click me!
⇐ @@Clicking here or on At-image will toggle also@@
Example image

Lorem ipsum dolor sit amet, consectetur adipisicing 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..

Header Top
Con Tent

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 cell 0 30

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 example

  • Table is collapsed by default
  • Second row contains collapsible list
  • Third row contains a collapsible block with custom labels
Collapse User:Krinkle/Test suite for mw-collapsible
#1

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

 Example.svg
#2
  • Lorem
  • Ipsum
  • Dolor
 Example.svg
#3

There's a lot more secret content hidden !

This following code is top secret:

kmnd ihwkxucnskdf
 Example.svg
Last edited by Krinkle on 20160304172056
Permalink to this revision
Retrieved from "https://test.wikipedia.org/w/index.php?title=User:Krinkle/Test_suite_for_mw-collapsible&oldid=263063"