Search code examples
mathjax

Delay MathJax processing of specific elements

I have a website with simple text, mixed with sections where only the header is visible initially. Clicking the header expands the section. All parts of this page can contain math that I want to be typeset nicely with MathJax, but the sections can be very long and contain a lot of math. I would like to defer the processing of each section until the corresponding header is clicked. Is this possible?

I know that MathJax has TypeSet functions that I can call when the section is displayed, so dynamically typesetting the math is not the issue. I also found the elements configuration option, but this does the opposite of what I want: it lets you only process certain elements, while I want to exclude certain elements.

Example page: http://jsfiddle.net/pnbjh5tg/

Solution

  • I figured out a way to do this. Essentially, I overlooked the ignoreClass option of the tex2jax pre-processor. Adding the class tex2jax_ignore to all sections makes sure that they are not processed when the page loads. The following JavaScript then processes them when their header is clicked:

    var section = $(this).parent().children('.section-container');
section.removeClass("tex2jax_ignore");
MathJax.Hub.Queue(["Typeset",MathJax.Hub,section.get(0)]);

    The result can be seen in this jsFiddle.