User:Mzajac/jQuery.makeCollapsible in table captions

Test cases for Bug 47139: jQuery.makeCollapsible: support table captions.

Test cases

mw-collapsible table

Control: an ordinary collapsible table with a caption.

It would be better if the toggle appeared in the caption, and the table collapsed to its caption instead of its first row.

Caption
11111	22222
33333	44444

{| class="mw-collapsible wikitable"
|+ Caption
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, dynamic toggle text

Control: an ordinary collapsible table with a caption, and custom toggle text.

It would be better if the toggle appeared in the caption, and the table collapsed to its caption instead of its first row.

Caption
11111	22222
33333	44444

{| class="mw-collapsible wikitable" data-collapsetext="Closeth!" data-expandtext="Open sesame!"
|+ Caption
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible caption

The caption is collapsible. Works as expected, but not useful.

It would be better if the table collapsed as above, only leaving the caption visible, and not the first row. Also, the appearance would be better if the toggle wasn’t a float but inline after the caption content.

Caption
11111	22222
33333	44444

{| class="wikitable"
|+ class="mw-collapsible" | Caption
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, mw-customtoggle

Ordinary table with a custom toggle in a separate div.

Caption
11111	22222
33333	44444

<div class="mw-customtoggle-AA"></div>

{| class="wikitable mw-collapsible" id="mw-customcollapsible-AA"
|+ | Caption
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, mw-customtoggle, dynamic toggle text

As above, with dynamic toggle text.

Dynamic text doesn’t appear. I guess the dynamic text feature is not compatible with the custom toggle feature. Too bad.

Caption
11111	22222
33333	44444

<div class="mw-customtoggle-FF"></div>

{| class="wikitable mw-collapsible" id="mw-customcollapsible-FF" data-collapsetext="collapse" data-expandtext="expand"
|+ | Caption
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, mw-customtoggle in the caption

Table with a custom toggle span in its caption.

Works well, but no dynamic text. (A div in the same place renders before the table in the document flow.)

Caption
11111	22222
33333	44444

{| class="wikitable mw-collapsible" id="mw-customcollapsible-BB"
|+ Caption <span class="mw-customtoggle-BB"></span>
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, mw-customtoggle is the caption

Table with its caption made into a custom toggle.

Works well, but no dynamic text.

Caption
11111	22222
33333	44444

{| class="wikitable mw-collapsible" id="mw-customcollapsible-CC"
|+ class="mw-customtoggle-CC" | Caption 
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, mw-customtoggle is the caption, collapsed

The same, starting in a collapsed state.

Caption
11111	22222
33333	44444

{| class="wikitable mw-collapsible mw-collapsed" id="mw-customcollapsible-DD"
|+ class="mw-customtoggle-DD" | Caption 
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}

mw-collapsible table, mw-customtoggle is the caption, dynamic toggle text

Trying to use dynamic labels in the caption.

Dynamic labels don’t appear.

Caption
11111	22222
33333	44444


{| class="wikitable mw-collapsible" id="mw-customcollapsible-EE" data-collapsetext="collapse" data-expandtext="expand"
|+ class="mw-customtoggle-EE" | Caption 
|-
! 11111 !! 22222
|-
| 33333 || 44444
|}