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.

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

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

$$ \begin{aligned} \int\limits_{1}^{2} (2x^2+3x) \ dx &= \bigg[\frac{2}{3}x^3+\frac{3}{2}x^2\bigg]_{1}^{2}\\ &=9.1667\\ \end{aligned} $$