User:Horblegorble/Sandbox/CollapsibleRow: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Revision as of 10:38, 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

40.00%

Steel Armor	01-01	20.00%
Steel Cuirass		6.67%
Steel Shoulders		6.67%
Steel Chausses		6.67%

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

Scale Armor expand	1	10%
Scale Chestpiece		3.33%
Scale Shoulderguards		3.33%
Scale Leggings		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 44: / Line 44: @@
   <tr>
-    <th width=55%>Item</th>
+    <th width=52%>Item</th>
-    <th width=20%>Quantity</th>
+    <th width=18%>Quantity</th>
-    <th width=25%>Rarity</th>
+    <th width=30%>Rarity</th>
   </tr>
@@ Line 62: / Line 62: @@
   <tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible" data-expandtext="+" data-collapsetext="-" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
         <tr>
-          <td width=55% style="padding-left:1em;">Armor</td>
+          <td width=52% style="padding-left:1em;">Armor</td>
-          <td width=21% style="padding-left:1em;">1</td>
+          <td width=19% style="padding-left:1em;">1</td>
-          <td width=24% style="padding-left:1em;">10%</td>
+          <td width=29% style="padding-left:1em;" class="rarity-green">40.00%</td>
         </tr>
         <tr>
           <td colspan=3>
-           <div class="mw-collapsible" data-expandtext="+" data-collapsetext="-">
+            <table class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
-            <table class="wikitable"  style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
               <tr>
-                <td witdth=60%>
+                <td witdth=52%>
                   <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 style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b></div>
-                      <div class="mw-collapsible-toggle-placeholder"></div>
-                    </div>
-                  </div>
                 </td>
-                <td width=25% style="padding-left:1em;"><b>1</b></td>
+                <td width=20% style="padding-left:1em;"><b>01-01</b></td>
-                <td width=15% class="rarity-yellow" style="padding-left:1em;"><b>20%</b></td>
+                <td width=28% style="padding-left:1em;" class="rarity-yellow"><b>20.00%</b></td>
               </tr>
               <tr>
@@ Line 91: / Line 87: @@
                   </div>
                 </td>
-                <td style="padding-left:1em;">3.33%</td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
               </tr>
               <tr>
@@ Line 100: / Line 96: @@
                   </div>
                 </td>
-                <td style="padding-left:1em;">3.33%</td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
               </tr>
               <tr>
@@ Line 109: / Line 105: @@
                   </div>
                 </td>
-                <td style="padding-left:1em;">3.33%</td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
               </tr>
             </table>
-            <div>
           </td>
         </tr>
@@ Line 118: / Line 113: @@
         <tr>
           <td colspan=3>
-            <table class="wikitable mw-collapsible mw-collapsed" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+            <table class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-"  style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
               <tr>
-                <td witdth=55%>
+                <td witdth=52%>
                   <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>
@@ Line 126: / Line 121: @@
                   </div>
                 </td>
-                <td width=21% style="padding-left:1em;"><b>1</b></td>
+                <td width=20% style="padding-left:1em;"><b>1</b></td>
-                <td class="rarity-yellow" width=24% style="padding-left:1em;"><b>20%</b></td>
+                <td width=28% style="padding-left:1em;" class="rarity-yellow"><b>20%</b></td>
               </tr>
               <tr>
@@ Line 136: / Line 131: @@
                   </div>
                 </td>
-                <td style="padding-left:1em;">6.67%</td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
               </tr>
               <tr>
@@ Line 145: / Line 140: @@
                   </div>
                 </td>
-                <td style="padding-left:1em;">6.67%</td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
               </tr>
               <tr>
@@ Line 154: / Line 149: @@
                   </div>
                 </td>
-                <td style="padding-left:1em;">6.67%</td>
+                <td style="padding-left:1em;" class="rarity-orange">6.67%</td>
               </tr>
             </table>
@@ Line 166: / Line 161: @@
   <tr>
     <td colspan=3>
-      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
+      <table class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-" 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 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>
-<tr>
-    <td colspan=3>
-      <table class="wikitable mw-collapsible" style="text-align:left;" cellpadding="0" cellspacing="0" width=100%>
       <tr>
-        <td witdth=55%>
+        <td witdth=52%>
           <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=90%;">[[File:Veloren Scale Armor Set.png|32px|link=]]</div>
-            <div style="width=10%; padding-left:0.5em;"><b>[[Steel Armor]]</b>
+            <div style="width=10%; padding-left:0.5em;"><b>[[Scale 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 width=19% style="padding-left:1em;"><b>1</b></td>
-        <td class="rarity-yellow" width=24% style="padding-left:1em;"><b>20%</b></td>
+        <td width=29% style="padding-left:1em;" class="rarity-yellow"><b>10%</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=90%;">[[Image:veloren_Scale_Chestpiece.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Steel Cuirass]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Scale Chestpiece]]</div>
           </div>
         </td>
-        <td style="padding-left:1em;">3.33%</td>
+        <td style="padding-left:1em;" class="rarity-orange">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=90%;">[[Image:veloren_Scale_Shoulderguards.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Steel Shoulders]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Scale Shoulderguards]]</div>
           </div>
         </td>
-        <td style="padding-left:1em;">3.33%</td>
+        <td style="padding-left:1em;" class="rarity-orange">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=90%;">[[Image:veloren_Scale_Leggings.png|32px]]</div>
-            <div style="width=10%; padding-left:0.5em;">[[Steel Chausses]]</div>
+            <div style="width=10%; padding-left:0.5em;">[[Scale Leggings]]</div>
           </div>
         </td>
-        <td style="padding-left:1em;">3.33%</td>
+        <td style="padding-left:1em;" class="rarity-orange">3.33%</td>
       </tr>
     </table>
@@ Line 308: / Line 213: @@
     </td>
     <td style="padding-left:1em;>2-4</td>
-    <td class="rarity-yellow" style="padding-left:0.8em;">10%</td>
+    <td style="padding-left:0.8em;" class="rarity-yellow">10%</td>
   </tr>