Add rendering example for maction

pepelsbey · Nov 21, 2024 · ab55f10 · ab55f10
1 parent 2d73e7a
commit ab55f10
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 28 deletions.
diff --git a/files/en-us/web/mathml/element/maction/index.md b/files/en-us/web/mathml/element/maction/index.md
@@ -34,39 +34,63 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
 
 The following example uses the "toggle" `actiontype`:
 
+```css hidden
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  place-content: center;
+}
+
+math {
+  font-size: 1.5em;
+}
+
+maction {
+  padding: 0.5em;
+  cursor: pointer;
+}
+```
+
 ```html
-<p>
-  Try clicking this formula several times:
-
-  <math display="block">
-    <maction actiontype="toggle">
-      <mfrac>
-        <mn>6</mn>
-        <mn>8</mn>
-      </mfrac>
-
-      <mfrac>
-        <mrow>
-          <mn>3</mn>
-          <mo>×</mo>
-          <mn>2</mn>
-        </mrow>
-        <mrow>
-          <mn>4</mn>
-          <mo>×</mo>
-          <mn>2</mn>
-        </mrow>
-      </mfrac>
-
-      <mfrac>
+<p>Try clicking this formula several times:</p>
+<math display="block">
+  <maction actiontype="toggle">
+    <mfrac>
+      <mn>6</mn>
+      <mn>8</mn>
+    </mfrac>
+
+    <mfrac>
+      <mrow>
         <mn>3</mn>
+        <mo>×</mo>
+        <mn>2</mn>
+      </mrow>
+      <mrow>
         <mn>4</mn>
-      </mfrac>
-    </maction>
-  </math>
-</p>
+        <mo>×</mo>
+        <mn>2</mn>
+      </mrow>
+    </mfrac>
+
+    <mfrac>
+      <mn>3</mn>
+      <mn>4</mn>
+    </mfrac>
+  </maction>
+</math>
 ```
 
+Sample rendering:
+
+![MathML toggle action example](toggle.gif)
+
+Rendering in your browser:
+
 {{EmbedLiveSample('Examples', 700, 200)}}
 
 ## Technical summary

diff --git a/files/en-us/web/mathml/element/maction/toggle.gif b/files/en-us/web/mathml/element/maction/toggle.gif