Difference between revisions of "FP Solution"

From Marek Běhálek Wiki
Jump to navigation Jump to search
Line 22: Line 22:
 
<div style="clear:both;"></div>
 
<div style="clear:both;"></div>
 
----
 
----
 +
 +
<big>''' Collapsible table-cell content in a table'''</big>
 +
----
 +
 +
<table class="wikitable">
 +
<tr>
 +
<th>X</th> <th>Y</th> <th>Z</th>
 +
</tr>
 +
<tr>
 +
<td>Hi, the content in the cell below me is collapsible and collapsed by default</td> <td>35</td> <td>91</td>
 +
</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>
 +
 +
<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!]] &lArr; @@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 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>
 +
 +
 +
<div style="clear:both"></div>
 +
 +
<big>''' Combination example '''</big>
 +
----
 +
<ul class="mw-collapsible mw-collapsed" data-collapsetext="I understand" data-expandtext="Click here for more information">
 +
<li>Table is collapsed by default</li>
 +
<li>Second row contains collapsible list</li>
 +
<li>Third row contains a collapsible block with custom labels</li>
 +
</ul>
 +
 +
{| class="wikitable plainlinks mw-collapsible mw-collapsed"
 +
!colspan="3" | <strong class="mw-collapsible-toggle mw-collapsible-toggle-expanded" style="color:#FF00EE;float:none">Collapse</strong> '''{{FULLPAGENAME}}'''
 +
|-
 +
|width="14%" | #1
 +
|
 +
Hello, [{{fullurl:{{FULLPAGENAME}}|action=edit}} edit this page]
 +
Hello, [{{fullurl:{{FULLPAGENAME}}|action=purge}} purge this page]
 +
Hello, [{{fullurl:{{TALKPAGENAME}}|action=edit&section=new}} add new section to talkpage]
 +
|width="14%"| [[File:Example.svg|25x25px]]
 +
|-
 +
|width="14%" | #2
 +
|
 +
<ul class="mw-collapsible">
 +
<li>Lorem</li>
 +
<li>Ipsum</li>
 +
<li>Dolor</li>
 +
</ul>
 +
|width="14%"| [[File:Example.svg|25x25px]]
 +
|-
 +
|width="14%" | #3
 +
|
 +
There's a lot more secret content hidden !
 +
<div style="background:red" class="mw-collapsible mw-collapsed" data-collapsetext="Hide me" data-expandtext="Reveal me">
 +
'''This following code is top secret:'''<br />
 +
: ''kmnd ihwkxucnskdf''
 +
</div>
 +
|width="14%"| [[File:Example.svg|25x25px]]
 +
|-
 +
|colspan=3 style="text-align:center"|Last edited by [[User:{{REVISIONUSER}}|{{REVISIONUSER}}]] on {{REVISIONTIMESTAMP}}
 +
|-
 +
|colspan=3 style="text-align:center"|[{{fullurl:{{FULLPAGENAME}}|oldid={{REVISIONID}}}} Permalink to this revision]
 +
|}

Revision as of 10:26, 23 September 2020

fact1 :: Int -> Int
fact1 0 = 1
fact1 n = n * fact1 (n-1)


Soluiton

Some text in the div here. 

fact1 :: Int -> Int
fact1 0 = 1
fact1 n = n * fact1 (n-1)

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

<templatestyles src="Manual:Collapsible elements/Demo/Advanced/styles.css" />

Pre-made toggle with link in it

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

Template:Sample content

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

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
Collapse FP Solution
#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 Beh01 on 20200923102643
Permalink to this revision
Retrieved from "http://behalek.cs.vsb.cz/wiki/index.php?title=FP_Solution&oldid=2152"