MathJax with Reveal — Right Way

<html>
<head>
<title>MathJax with Reveal — Right Way</title>
<script
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<style>
.mathbox {
  border: 1px solid;
  padding: 10px 20px;
  margin: 0 auto;
  width: 22em;
  display: none;
}
</style>
<style id="initial_hide">
.mathbox {
  display: block; visibility: hidden;
  height: 0; overflow: hidden;
  padding: 0; margin: 0; border: none;
}
</style>
</head>
<body>

<p>Press
<input type="button" value="Update" onclick="DynamicMJ.update()" />
to reveal some math below:</p>

<!-------------------------------->

<div id="eq1" class="mathbox">
This file is loaded by jQuery and then typeset by MathJax.
<p>
An equation is \(E=mc^2\).
</div>

<!-------------------------------->

<div id="eq2" class="mathbox">
Another equation is 
$$
  \sum_{i=1}^{n} i = {n(n+1)\over 2}.
$$
</div>

<!-------------------------------->

<div id="eq3" class="mathbox">
The final equation is 
$$
  \int f(x)+g(x)\,dx = \int f(x)\,dx + \int g(x)\,dx
$$
where \(f\) and \(g\) are integrable functions.
</div>

<!-------------------------------->

<script>
var DynamicMJ = {
  n: 3,
  update: function () {
    document.getElementById("eq"+this.n).style.display = "none";
    this.n++; if (this.n > 3) {this.n = 1}
    document.getElementById("eq"+this.n).style.display = "block";
  }
};
MathJax.Hub.Queue(function () {
  document.getElementById("initial_hide").disabled = true;
});
</script>

</body>
</html>

[Prev][Up][Forward]