Sandbox

From Judge Wiki (English)
Jump to: navigation, search

card experiments

Chandra, Roaring Flame Chandra, Fire of Kaladesh

Test suite for mw-collapsible

Collapsible div


{

Collapsible div (collapsed by default)


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque suscipit mi. Sed nec pretium arcu. Phasellus consequat neque turpis, at euismod justo fermentum vitae. Vestibulum iaculis venenatis neque, sit amet semper mauris pharetra rutrum. Nulla eget tempor quam. Ut vel ante id purus tincidunt consequat eu ac libero. Duis rutrum turpis eget mauris placerat, id facilisis neque eleifend. Nulla sollicitudin tincidunt fringilla.

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 (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


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque suscipit mi. Sed nec pretium arcu. Phasellus consequat neque turpis, at euismod justo fermentum vitae. Vestibulum iaculis venenatis neque, sit amet semper mauris pharetra rutrum. Nulla eget tempor quam. Ut vel ante id purus tincidunt consequat eu ac libero. Duis rutrum turpis eget mauris placerat, id facilisis neque eleifend. Nulla sollicitudin tincidunt fringilla.

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. Nullam pellentesque suscipit mi. Sed nec pretium arcu. Phasellus consequat neque turpis, at euismod justo fermentum vitae. Vestibulum iaculis venenatis neque, sit amet semper mauris pharetra rutrum. Nulla eget tempor quam. Ut vel ante id purus tincidunt consequat eu ac libero. Duis rutrum turpis eget mauris placerat, id facilisis neque eleifend. Nulla sollicitudin tincidunt fringilla.

Remote collapsible 1 (div, multiple togglers) @


@
Click here or on one of the @'s to expand the hidden element.
⇐ @@Clicking here or on At-image will toggle also@@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque suscipit mi. Sed nec pretium arcu. Phasellus consequat neque turpis, at euismod justo fermentum vitae. Vestibulum iaculis venenatis neque, sit amet semper mauris pharetra rutrum. Nulla eget tempor quam. Ut vel ante id purus tincidunt consequat eu ac libero. Duis rutrum turpis eget mauris placerat, id facilisis neque eleifend. Nulla sollicitudin tincidunt fringilla.

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 example


  • Table is collapsed by default
  • Second row contains collapsible list
  • Third row contains a collapsible block with custom labels


Test