Home | Math Display Experiments | Reveal Steps in MathJax Output

Page by Murray Bourne, IntMath.com. Last updated: 31 Mar 2018# Reveal Steps in MathJax Output

**UPDATE:** I realised after doing this that there is an easier way on the MathJax site. Oh well, it was an interesting exercise...

The examples below show how you can step through MathJax aligned equations one line at a time.

The "aligned" math is in this format:

$$ \begin{aligned} x &= y \\ x^2 &= xy \\ x^2-y^2 &= xy - y^2 \\ x + y &= y \\ 2y &= y\\ 2 &= 1 \end{aligned} $$

Summary of the technique:

- On page load, all
`class="display"`

DIVs are set to`display:none`

in the CSS. - After MathJax has done its processing, the jQuery script tells the first DIV with class
`display`

to`show()`

. - When the user clicks the button, we loop through all the MathJax output in the first "display" DIV and then save in an array all the IDs of the
`<span>`

s containing math expressions on either side of the equals sign. - We then diplay the first line of the equations by showing the
`<span>`

s on either side of the first equal sign. - Each subsequent click shows another line.
- At the end of the math, hide the button (so the user isn't uselessly clicking).
- Display the next "display" class DIV.
- Rinse and repeat.

This is just a "proof of concept" example. It would need some more tweaks for various use cases. I hope it's useful for someone.

## Some Examples

**NOTE:** Your MathJax math needs to be displayed as HTML-CSS for this to work.