Expand the following: \begin{align} (x+1)^2 &= \cssId{Step1}{(x+1)(x+1)} \\[3px] &\cssId{Step2}{{} = x(x+1) + 1(x+1)} \\[3px] &\cssId{Step3}{{} = (x^2+x) + (x+1)} \\[3px] &\cssId{Step4}{{} = x^2 + (x + x) + 1} \\[3px] &\cssId{Step5}{{} = x^2 + 2x + 1} \end{align}
This example shows how to use the Javascript and CSS ids to display
an equation that reveals the steps in a computation one at a time.
The expression uses the \cssId macro to mark the parts of
the expression to be revealed, and sets the CSS for those ids to be
hidden initially. A javascript function tied to a button sets the
styles for the individual elements to reveal them one at a time.
It also shows one way to prevent the page from being displayed
until after MathJax has completed its processing. That means that there
will be no flashing of the unprocessed math before the typeset math is
displayed. This is accomplished by having the document body be
initially hidden, and using the pageReady() function in
the startup block of the MathJax configuration to make
the body visible once the math has been typeset.
The javascript that reveals the steps of the expression is stored
in a global object called Reveal. It has a variable
n that indicates the next step to be show. The
Reveal.Show() function shows step n and
increments n so that it will show the next step when
called again. It also manages the state of the two buttons below the
expression so that they are enabled at the proper times.
The Reveal.Reset() function hides all the steps, sets
n to 1 so the steps can be revelaed again, and makes make
sure the correct buttons are enabled.