|
|
| (6 intermediate revisions by the same user not shown) |
| Line 7: |
Line 7: |
| | | | |
| | | | |
| − | ----
| |
| − | Soluiton
| |
| | <div class="mw-collapsible mw-collapsed" data-collapsetext="Hide solution" data-expandtext="Show solution"> | | <div class="mw-collapsible mw-collapsed" data-collapsetext="Hide solution" data-expandtext="Show solution"> |
| | Some text in the div here. | | Some text in the div here. |
| Line 21: |
Line 19: |
| | | | |
| | <div style="clear:both;"></div> | | <div style="clear:both;"></div> |
| − | ----
| |
| | | | |
| − | <big>''' Collapsible table-cell content in a table'''</big> | + | <div class="toccolours mw-customtoggle-myList">Show solution</div> |
| − | ----
| |
| | | | |
| − | <table class="wikitable"> | + | <div class=" mw-collapsible mw-collapsed" id="mw-customcollapsible-myList"> |
| − | <tr>
| + | Some text in the div here. |
| − | <th>X</th> <th>Y</th> <th>Z</th>
| + | <syntaxhighlight lang="Haskell"> |
| − | </tr>
| + | fact1 :: Int -> Int |
| − | <tr>
| + | fact1 0 = 1 |
| − | <td>Hi, the content in the cell below me is collapsible and collapsed by default</td> <td>35</td> <td>91</td>
| + | fact1 n = n * fact1 (n-1) |
| − | </tr> | |
| − | <tr>
| |
| − | <td class="mw-collapsible mw-collapsed">I'm the mw-collapsible cell content!</td> <td>42</td> <td>63</td>
| |
| − | </tr>
| |
| − | </table>
| |
| | | | |
| − | <div style="clear:both"></div>
| + | </syntaxhighlight> |
| − | | + | Some more text in the div. |
| − | <big id="head-collapsible-ul>''' Collapsible unordered list '''</big>
| |
| − | ----
| |
| − | <ul class="mw-collapsible">
| |
| − | <li>Lorem</li>
| |
| − | <li>Ipsum</li>
| |
| − | <li>Dolor</li>
| |
| − | </ul>
| |
| − | | |
| − | <div style="clear:both"></div>
| |
| − | | |
| − | <big id="head-collapsible-ol">''' Collapsible ordered list '''</big>
| |
| − | ----
| |
| − | <ol class="mw-collapsible">
| |
| − | <li>One
| |
| − | <li>Two is more than one</li>
| |
| − | <li>..a total of three items!</li>
| |
| − | </ol>
| |
| − | | |
| − | <div style="clear:both"></div>
| |
| − | | |
| − | <big>''' Pre-made toggle'''</big>
| |
| − | ----
| |
| − | <templatestyles src="Manual:Collapsible elements/Demo/Advanced/styles.css" />
| |
| − | <div id="collapse-pre-one" class="mw-collapsible"><div class="mw-collapsible-toggle toccolours" style="float: none;"><span class="down">[[File:Arrow-down-dash-2.0.svg|50px|center|link=]]</span><span class="up">[[File:Arrow-up-dash-2.0.svg|50px|center|link=]]</span></div>
| |
| − | <div class="mw-collapsible-content">
| |
| − | {{Sample content}}
| |
| − | </div></div>
| |
| − | | |
| − | <div style="clear:both"></div>
| |
| − | | |
| − | <big id="h-pre-made-toggle-with-link">''' Pre-made toggle with link in it'''</big>
| |
| − | ----
| |
| − | <div class="mw-collapsible"><div class="mw-collapsible-toggle toccolours" style="float: none;">This is a toggle with link to [[#top|the top of the page]]</div>
| |
| − | <div class="mw-collapsible-content">
| |
| − | {{Sample content}}
| |
| − | </div></div>
| |
| − | | |
| − | <div style="clear:both"></div>
| |
| − | | |
| − | <big>''' Remote collapsible 1 (div, multiple togglers) <sup class="mw-customtoggle-myDivision" style="color:orange">@</sup>'''</big>
| |
| − | ----
| |
| − | | |
| − | :<strong class="mw-customtoggle-myDivision">@</strong>
| |
| − | | |
| − | <div class="usermessage mw-customtoggle-myDivision">Click here or on one of the @'s to expand the hidden element.</div>
| |
| − | | |
| − | <div class="mw-customtoggle-myDivision" style="cursor:pointer">[[File:At_char.svg|100px|left|link=|title=Click me!]] ⇐ @@Clicking here or on At-image will toggle also@@<div style="clear:both"></div></div>
| |
| − | | |
| − | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
| |
| − | <div class="toccolours mw-collapsible-content">{{Sample content}}</div>
| |
| | </div> | | </div> |
| | | | |
| | <div style="clear:both"></div> | | <div style="clear:both"></div> |
| − |
| |
| − | <big>''' Custom collapsible 2 (table)'''</big>
| |
| − | ----
| |
| − |
| |
| − | <div class="usermessage mw-customtoggle-myTable">Click here to toggle the table.</div>
| |
| − |
| |
| − | {| class="wikitable sortable mw-collapsible" id="mw-customcollapsible-myTable"
| |
| − | ! Hello
| |
| − | ! World
| |
| − | |-
| |
| − | | Content
| |
| − | | Goes
| |
| − | |-
| |
| − | | In
| |
| − | | Here
| |
| − | |}
| |
| − |
| |
| − | <div style="clear:both"></div>
| |
| − |
| |
| − | <big>''' Custom collapsible 3 (list)'''</big>
| |
| − | ----
| |
| − |
| |
| − | <div class="usermessage mw-customtoggle-myList">Click here to toggle the list.</div>
| |
| − |
| |
| − | <ul class="mw-collapsible" id="mw-customcollapsible-myList">
| |
| − | <li>A</li>
| |
| − | <li>B</li>
| |
| − | <li>C</li>
| |
| − | <li>D</li>
| |
| − | </ul>
| |
| − |
| |
| − | <div style="clear:both"></div>
| |
| − |
| |
| − | <big>''' Custom collapsible 4 (table-row)'''</big>
| |
| − | ----
| |
| − |
| |
| − | <table class="wikitable">
| |
| − | <tr>
| |
| − | <th>X</th> <th>Y</th> <th>Z</th>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td><span class="mw-customtoggle-AA mw-customtoggle-BB mw-customtoggle-CC">I'm the mw-customtoggle for A, B and C. Click me to toggle three table-rows at once!</span></td> <td>20</td> <td>11</td>
| |
| − | </tr>
| |
| − | <tr id="mw-customcollapsible-AA" class="mw-collapsible mw-collapsed">
| |
| − | <td>I'm the mw-customcollapsible row A</td> <td>20</td> <td>7</td>
| |
| − | </tr>
| |
| − | <tr id="mw-customcollapsible-BB" class="mw-collapsible mw-collapsed">
| |
| − | <td>I'm the mw-customcollapsible row B</td> <td>21</td> <td>11</td>
| |
| − | </tr>
| |
| − | <tr id="mw-customcollapsible-CC" class="mw-collapsible mw-collapsed">
| |
| − | <td>I'm the mw-customcollapsible row C</td> <td>29</td> <td>1</td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>This is just a plain table cell</td><td>0</td><td>30</td>
| |
| − | </tr>
| |
| − | </table>
| |
| − |
| |
| − | <big>''' Custom collapsible 5 (double purpose toggle)'''</big>
| |
| − | ----
| |
| − |
| |
| − |
| |
| − | <div class="toccolours">
| |
| − | <div class="mw-collapsible toccolours" id="mw-customcollapsible-DPT">
| |
| − | I am custom collapsible "DPT".
| |
| − | </div>
| |
| − |
| |
| − | <div class="mw-collapsible toccolours"><span class="mw-collapsible-toggle mw-customtoggle-DPT" style="cursor: pointer; border: 1px solid #aaa; border-radius: 5px; padding: 2px;">I am a toggle for my parent ("collapsible div") and custom toggle for "DPT".</span>
| |
| − | <div class="mw-collapsible-content">
| |
| − | I am a collapsible div.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
