Mathjax delay rendering code inside spoilers - mathjax

Question

I am trying to render mathjax for visible elements in the following. I hid the answers and would like to render math only when someone clicks on the button. Currently mathjax is doing fantastic job even rendering math inside spoilers. Davide (mathjax) suggested a solution but I could not get what he suggested. Can anyone help me with this? The goal is to render mathjax as fast as possible. Code I am using https://cdn.jsdelivr.net/gh/srk7774/cg/mj3_chtml.js
Please make necessary changes to the html code so that I can understand it better.
Davide's suggestion:
https://groups.google.com/g/mathjax-users/c/Xr-arJPN2kI
Site:
https://www.campusgate.in/2011/11/permutations.html
<span class="q-box">1</span>How many arrangements can be made of the letters of the word “ASSASSINATION”? In how many of them are the vowels always together?<br />
<span class="step">A</span>$\dfrac{{13!}}{{{{\left( {4!} \right)}^2}}},\;\dfrac{{8! \times 6!}}{{{{\left( {4!} \right)}^2}}}$<br />
<span class="step">B</span>$\dfrac{{13!}}{{6! \times 7!}},\;\dfrac{{8! \times 6!}}{{{{\left( {4!} \right)}^2}}}$<br />
<span class="step">C</span>$\dfrac{{13!}}{{6! \times 7!}},\;\dfrac{{8! \times 6!}}{{6! \times 7!}}$<br />
<span class="step">D</span>$\dfrac{{13!}}{{{{\left( {4!} \right)}^2}}},\;\dfrac{{8! \times 6!}}{{6! \times 7!}}$<br />
<div class="border" id="spoiler1" style="display: none;">Answer: A<br />
<div class="border1" id="spoiler1A" style="display: none;">Explanation:<br />
Total letters in the word $ASSASSINATION$ $=13$<br />
$(SSSS), (AAA), (II), (NN), T, O$<br />
<span class="f-box">Formula:</span>Number of ways of arranging $n$ items of which $p$ are alike, $q$ alike and so on $ = \dfrac{{n!}}{{p! \times q! \times ...}}$<br />
Total number of arrangements $ = \dfrac{{13!}}{{4! \times 3! \times 2! \times 2!}}$ $ = \dfrac{{13!}}{{4! \times 4 \times 3!}}$ $ = \dfrac{{13!}}{{{{\left( {4!} \right)}^2}}} \qquad (1)$ <br />
Vowels in the given word $=AAAIIO$<br />
Let us put them in a box and name it a letter $X$.<br />
$\boxed{AAAIIO}_{\rightarrow{X}}, S, S, S, S, N, N, T $<br />
Now total letters $= 8$<br />
Number of ways of arranging $8$ letters in $8$ places $ = \dfrac{{8!}}{{4! \times 2!}}$<br />
Numebr of ways the vowels in the box arrange themselves $ = \dfrac{{6!}}{{3! \times 2!}}$<br />
Total ways in which all vowels together $ = \dfrac{{8!}}{{4! \times 2!}} \times \dfrac{{6!}}{{3! \times 2!}}$ $ = \dfrac{{8! \times 6!}}{{{{\left( {4!} \right)}^2}}} \qquad (2)$<br />
<!-- explanation Ends--></div><button onclick="if(document.getElementById('spoiler1A') .style.display=='none') {document.getElementById('spoiler1A') .style.display=''}else{document.getElementById('spoiler1A') .style.display='none'}" title="Click to show/hide content" type="button">Show Explanation</button></div><button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="Click to show/hide content" type="button">Show Answer</button><br />
<br />
<span class="q-box">2</span>In how many ways can the letters of the word ARRANGE be arranged so that two R’s are never together <br />
<span class="step">A</span>900<br />
<span class="step">B</span>360<br />
<span class="step">C</span>120<br />
<span class="step">D</span>1260<br />
<div class="border" id="spoiler2" style="display: none;">Answer: A<br />
<div class="border1" id="spoiler2A" style="display: none;">Explanation:<br />
<img border="0" data-original-height="277" data-original-width="422" src="https://1.bp.blogspot.com/-3LjCBAS8QzE/Xcw3ipNYQLI/AAAAAAAAepc/R70tcTQd5j8g2wLmpmBuY-0tCv8tYq7pwCLcBGAsYHQ/s1600/aarr11%2B%25282%2529.png" /><br />
$ARRANGE$ $=(AA), (RR), N, G, E$<br />
Two R’s are never together $=$ (Total possible arrangements) $-$ (Two R’s are always together)<br />
Total number of arrangements = $\dfrac{{7!}}{{2! \times 2!}}$ = $\dfrac{{7 \times 6 \times 5 \times 4 \times 3 \times 2 \times 1}}{{2 \times 2}}$ $= 1260$<br />
<br />
Arrangements with both R’s together:<br />
Let us put both $R$'s are in a box and name it letter $X$.<br />
$\boxed{RR}_{\rightarrow{X}}, A, A, N, G, E $<br />
Number of ways of arranging above $6$ letters = $\dfrac{{{\text{6}}!}}{{{\text{2}}!}}$ $= 360$<br />
(Note: Two $R$'s in the box arrange only one way)<br />
<br />
R’s never together $= 1260 - 360 = 900$<br />
<!-- explanation Ends--></div><button onclick="if(document.getElementById('spoiler2A') .style.display=='none') {document.getElementById('spoiler2A') .style.display=''}else{document.getElementById('spoiler2A') .style.display='none'}" title="Click to show/hide content" type="button">Show Explanation</button></div><button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" title="Click to show/hide content" type="button">Show Answer</button><br />
<br />

Answer 1

Fortunately it's possible to do what Davide suggested (which I believe is the best approach) without too much knowledge of JS and HTML. The code snippet you linked tells MathJax not to render inside of an element with the tex2jax_ignore class, so you can add this class to your spoiler divs. Taking the div with id spoiler1A as an example, you would set class="border1 tex2jax_ignore" to prevent MathJax from typesetting that element when the page loads. You would also add tex2jax_ignore to every element you do not want rendering inside of.
Then you need to tell MathJax to render the math inside the spoiler when it is shown. To set that up, you'll want to define this function based off the one in MathJax documentation - I'm guessing you might want to put it in a script tag after the script tag that loads https://cdn.jsdelivr.net/gh/srk7774/cg/mj3_chtml.js:
<script>
function typeset(id) {
MathJax.startup.promise = MathJax.startup.promise
.then(() => MathJax.typesetPromise([id]))
.catch((err) => console.log('Typeset failed: ' + err.message));
return MathJax.startup.promise;
}
</script>
Finally, you need to change the onclick handler for the button that shows the math: instead of onclick="if(document.getElementById('spoiler1A') .style.display=='none') {document.getElementById('spoiler1A') .style.display=''}else{document.getElementById('spoiler1A') .style.display='none'}",
you could write onclick="if(document.getElementById('spoiler1A') .style.display=='none') {document.getElementById('spoiler1A') .style.display=''; document.getElementById('spoiler1A').classList.remove('tex2jax_ignore');typeset('spoiler1A')}else{document.getElementById('spoiler1A') .style.display='none'}".
This removes the tex2jax_ignore class and calls the typeset method we defined to tell MathJax to render that element.