User:Coincollector/collapsible table 2: Difference between revisions
mNo edit summary |
m (Text replacement - "class="collapsible"" to "class="mw-collapsible"") |
||
| (One intermediate revision by one other user not shown) | |||
| Line 4: | Line 4: | ||
Using this function is really, REALLY simpler than the other first I had invented: By just adding said class, the table will turn collapsible, showing a <tt>show/hide</tt> link on the table. When adding the <tt>collapsible</tt> attribute to the table, this will be uncollapsed, collapsing then by clicking in the link. On the other hand, adding <tt>expandable</tt> class, the table will remain collapsed, showing only the header cell when the user have to click the link to show the content. Users can also manipulate what sections can be shown by adding the <tt>expandable</tt> class to the cell's group, while the table is in <tt>collapsible</tt> function. | Using this function is really, REALLY simpler than the other first I had invented: By just adding said class, the table will turn collapsible, showing a <tt>show/hide</tt> link on the table. When adding the <tt>collapsible</tt> attribute to the table, this will be uncollapsed, collapsing then by clicking in the link. On the other hand, adding <tt>expandable</tt> class, the table will remain collapsed, showing only the header cell when the user have to click the link to show the content. Users can also manipulate what sections can be shown by adding the <tt>expandable</tt> class to the cell's group, while the table is in <tt>collapsible</tt> function. | ||
==Other Pages to Sneak== | |||
Here you go. The first link shows the collapsible function coding. The second link shows a page where establishes such function in the tables when set. Finally, the third link is the history before and after the function's setup. | |||
*[[User:Coincollector/CollapsibleTables.js]] | |||
*[[Mediawiki:Common.js]] | |||
*<span class=plainlinks>[http://www.mariowiki.com/index.php?title=User:Coincollector/test_zone&oldid=503273 The Project]</span> | |||
==Usage== | ==Usage== | ||
*Note: The table's styles weren't added in the Code column. | |||
{| width=100% style="font-family:arial; border: 1px solid gray" | {| width=100% style="font-family:arial; border: 1px solid gray" | ||
|- bgcolor=gainsboro | |- bgcolor=gainsboro | ||
| Line 13: | Line 20: | ||
| | | | ||
<pre>{| class="collapsible" | <pre>{| class="mw-collapsible" | ||
! Table title | ! Table title | ||
|- | |- | ||
| Line 20: | Line 27: | ||
| | | | ||
{| width=100% class="collapsible" style="background:whitesmoke; border:1px solid gray" | {| width=100% class="mw-collapsible" style="background:whitesmoke; border:1px solid gray" | ||
! bgcolor=gainsboro | Table title | ! bgcolor=gainsboro | Table title | ||
|- | |- | ||
| Line 45: | Line 52: | ||
<pre> | <pre> | ||
{|class="collapsible" | {|class="mw-collapsible" | ||
! Table title | ! Table title | ||
|- class="collapsible" | |- class="mw-collapsible" | ||
! Subtitle 1 | ! Subtitle 1 | ||
|- | |- | ||
| Line 58: | Line 65: | ||
| | | | ||
{| width=100% class="collapsible" style="background:whitesmoke; border:1px solid gray" | {| width=100% class="mw-collapsible" style="background:whitesmoke; border:1px solid gray" | ||
! bgcolor=silver | Table title | ! bgcolor=silver | Table title | ||
|- class="collapsible" bgcolor=gainsboro | |- class="mw-collapsible" bgcolor=gainsboro | ||
! Subtitle 1 | ! Subtitle 1 | ||
|- | |- | ||
Latest revision as of 16:44, August 5, 2020
After several days going through, I've finally found a shorter way to make collapsible tables, something that this wiki lacked, while many other wikis that I met so far do have. Credits to the user Poke to find out this alternative for Mediawiki-based sites.
Using this function is really, REALLY simpler than the other first I had invented: By just adding said class, the table will turn collapsible, showing a show/hide link on the table. When adding the collapsible attribute to the table, this will be uncollapsed, collapsing then by clicking in the link. On the other hand, adding expandable class, the table will remain collapsed, showing only the header cell when the user have to click the link to show the content. Users can also manipulate what sections can be shown by adding the expandable class to the cell's group, while the table is in collapsible function.
Other Pages to Sneak
Here you go. The first link shows the collapsible function coding. The second link shows a page where establishes such function in the tables when set. Finally, the third link is the history before and after the function's setup.
Usage
- Note: The table's styles weren't added in the Code column.
| Code | Result | |||||
|---|---|---|---|---|---|---|
{| class="mw-collapsible"
! Table title
|-
| Table content
|}
|
| |||||
{| class="expandable"
! Table title
|-
| Table content
|}
|
| |||||
{|class="mw-collapsible"
! Table title
|- class="mw-collapsible"
! Subtitle 1
|-
| Content 1
|- class="expandable"
! Subtitle 2
|-
| Content 2
|}
|
|
