diff --git a/files/en-us/web/mathml/element/maction/index.md b/files/en-us/web/mathml/element/maction/index.md
index abb7840378ee068..836d7460a17ad15 100644
--- 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
new file mode 100644
index 000000000000000..0270d9f271a3363
Binary files /dev/null and b/files/en-us/web/mathml/element/maction/toggle.gif differ