Dynamic Equations in MathJax

This page: playing with this example from MathJax.

This second example is the same but with out of order steps showing that spacing is retained when the CSS visibility attribute is used:

Expand the following. Can you write the missing middle step before it appears? \begin{align} (x+1)^2 &\cssId{Step1}{\style{color:red}{= (x+1)(x+1)}}\\ &\class{" me="hi}{= x(x+1) + 1(x+1)}\\ &\class{timed" data-in="1" data-out="-1}{= (x^2+x) + (x+1)}\\ &\cssId{Step3}{= x^2 + (x + x) + 1}\\ &\cssId{Step4}{= x^2+2x+1}\\ \end{align}

Paragraph element with styled color and backgroud-color

A paragraph is here.
First line.
Second line.