User:Horblegorble/Sandbox/CollapsibleRow: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Revision as of 09:59, 8 August 2023

Original

copied from https://www.mediawiki.org/wiki/Manual:Collapsible_elements ('translate' elements removed)

Inside another element

You can also use collapsible elements in other elements, such as a table.

My table with collapsible info

Title

Sample

Lorem

Ipsum

More info

Number	Letter
1	A
2	B
3	C

Horblegorble's Loot Experiment

Item

Quantity

Rarity

Apple

1

60%

Armor

1

10%

Steel Armor	1	20%
Steel Cuirass		3.33%
Steel Shoulders		3.33%
Steel Chausses		3.33%

Silken Armor	1	20%
Silken Robe		6.67%
Silken Shoulders		6.67%
Silken Skirt		6.67%

Steel Armor expand	1	20%
Steel Cuirass		3.33%
Steel Shoulders		3.33%
Steel Chausses		3.33%

Silken Armor	1	20%
Silken Robe		6.67%
Silken Shoulders		6.67%
Silken Skirt		6.67%

Steel Armor expand	1	20%
Steel Cuirass		3.33%
Steel Shoulders		3.33%
Steel Chausses		3.33%

Coconut

2-4

10%

(Old) Minotaur Mockup

Item

Quantity

Rarity

Material	*	15.4%
Sunsilk	1-3	3.85%
Dragon Scale	3-8	3.85%
Orichalcum Ingot	1-3	3.85%
Eldwood Logs	2-6	3.85%

Carcanet of Wrath

1

3.85%

Orichalcum Armor	1	3.33%
Orichalcum Chestguard		0.48%
Orichalcum Mantle		0.48%
Orichalcum Legplates		0.48%
Orichalcum Cape		0.48%
Orichalcum Gloves		0.48%
Orichalcum Belt		0.48%
Orichalcum Warboots		0.48%

Dragonscale Armor	1	3.33%
Dragonscale Chestplate		0.48%
Dragonscale Mantle		0.48%
Dragonscale Leggings		0.48%
Dragonscale Cape		0.48%
Dragonscale Gloves		0.48%
Dragonscale Sash		0.48%
Dragonscale Spurs		0.48%

Sunsilk Armor	1	3.33%
Sunsilk Tunic		0.48%
Sunsilk Shoulderwraps		0.48%
Sunsilk Kilt		0.48%
Sunsilk Cape		0.48%
Sunsilk Handwraps		0.48%
Sunsilk Sash		0.48%
Sunsilk Footwraps		0.48%

Caladbolg

1

1.28%

Mjolnir

1

1.28%

Parashu

1

1.28%

@@ Line 1: / Line 1: @@
+<templatestyles src="https://wiki.veloren.net/wiki/User:Horblegorble/MyStyle.css" />
 == Original ==
 copied from https://www.mediawiki.org/wiki/Manual:Collapsible_elements
@@ Line 60: / Line 62: @@
   <tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible mw-collapsible-content" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+        <tr>
+          <td width=55% style="padding-left:1em;">Armor</td>
+          <td width=21% style="padding-left:1em;">1</td>
+          <td width=24% style="padding-left:1em;">10%</td>
+        </tr>
+        <tr>
+          <td colspan=3>
+           <div class="mw-collapsible" data-expandtext="+" data-collapsetext="-">
+            <table class="wikitable"  style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+              <tr>
+                <td witdth=60%>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
+                    <div style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b>
+                      <div class="mw-collapsible-toggle-placeholder"></div>
+                    </div>
+                  </div>
+                </td>
+                <td width=25% style="padding-left:1em;"><b>1</b></td>
+                <td width=15% class="rarity-yellow" style="padding-left:1em;"><b>20%</b></td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
+                    <div style="width=10%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;">3.33%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
+                    <div style="width=10%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;">3.33%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
+                    <div style="width=10%; padding-left:0.5em;">[[Steel Chausses]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;">3.33%</td>
+              </tr>
+            </table>
+            <div>
+          </td>
+        </tr>
+        <tr>
+          <td colspan=3>
+            <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+              <tr>
+                <td witdth=55%>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[File:Veloren Silken Armor Set.png|32px|link=]]</div>
+                    <div style="width=10%; padding-left:0.5em;"><b>[[Silken Armor]]</b></div>
+                  </div>
+                </td>
+                <td width=21% style="padding-left:1em;"><b>1</b></td>
+                <td class="rarity-yellow" width=24% style="padding-left:1em;"><b>20%</b></td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[Image:veloren_Silken_Robe.png|32px]]</div>
+                    <div style="width=10%; padding-left:0.5em;">[[Silken Robe]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;">6.67%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[Image:veloren_Silken_Shoulders.png|32px]]</div>
+                    <div style="width=10%; padding-left:0.5em;">[[Silken Shoulders]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;">6.67%</td>
+              </tr>
+              <tr>
+                <td colspan=2>
+                  <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+                    <div style="width=90%;">[[Image:veloren_Silken_Skirt.png|32px]]</div>
+                    <div style="width=10%; padding-left:0.5em;">[[Silken Skirt]]</div>
+                  </div>
+                </td>
+                <td style="padding-left:1em;">6.67%</td>
+              </tr>
+            </table>
+            </td>
+          <tr>
+        </td>
+      </table>
+    </td>
+  </tr>
+  <tr>
+    <td colspan=3>
+      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
       <tr>
         <td witdth=55%>
@@ Line 148: / Line 254: @@
   <tr>
+<tr>
+    <td colspan=3>
+      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+      <tr>
+        <td witdth=55%>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+            <div style="width=90%;">[[File:Veloren Steel Armor Set.png|32px|link=]]</div>
+            <div style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b>
+              <div class="mw-collapsible-toggle-placeholder">expand</div>
+            </div>
+          </div>
+        </td>
+        <td width=21% style="padding-left:1em;"><b>1</b></td>
+        <td class="rarity-yellow" width=24% style="padding-left:1em;"><b>20%</b></td>
+      </tr>
+      <tr>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+            <div style="width=90%;">[[Image:veloren_Steel_Cuirass.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">3.33%</td>
+      </tr>
+      <tr>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+            <div style="width=90%;">[[Image:veloren_Steel_Shoulders.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">3.33%</td>
+      </tr>
+      <tr>
+        <td colspan=2>
+          <div style="display:flex; align-items:center; justify-content:left; height:100%; width:100%;">
+            <div style="width=90%;">[[Image:veloren_Steel_Chausses.png|32px]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Steel Chausses]]</div>
+          </div>
+        </td>
+        <td style="padding-left:1em;">3.33%</td>
+      </tr>
+    </table>
+    </td>
+  <tr>
   <tr>
     <td>