You could have extra material to help with a question here. The user could click on "Less" to re-close the page.

 

You can reverse the effect - that is have the material showing when the page is loaded, yet allow the user to subsequently hide it. In fact this section is an example of that. If you click on "Hide" below this part of the page will be hidden. To do this use a similar Javascript call (note that you will have to use a different name than 'Extra'). Then in your named DIV make the default display on:

<div id="Extra1" style="display:block">Your extra material here.Notice the DIV name is Extra1, different than the earlier name. </div>

This is the outer open/close section you can open/close by clicking on More/Less above. You can open another section within this one with the Still More/Still Less buttons. The code needed is included there. Try playing with the buttons to see how nested sections work. Still moreStill Less

Here is the code:

<p><strong>
<button onclick="var eXTXT=document.getElementById('Extra20'); eXTXT.style.display='block'; return false;">More...</button>
<button onclick="var eXTXT=document.getElementById('Extra20'); eXTXT.style.display='none';return false;">Less...</button>
</strong></p>

<div id="Extra20" style="display:none">Content of outermost section here.

<button onclick="var eXTXT=document.getElementById('Extra21'); eXTXT.style.display='block'; return false;">Still more</button>
<button onclick="var eXTXT=document.getElementById('Extra21'); eXTXT.style.display='none';return false;">Still Less</button></div>

<div id="Extra21" style="display:none">Content of inner section here.</p>

</div>

</div>

More Fun...

In this example a table is shown when a button is clicked. Notice that the original button disappears and a Close Table button appears. Clicking on that button resets the screen to its original appearance.

 

---

Here is the code that does this:
<div id="LOpen" style="display:block">
  <strong>
  <button onclick="var eXTXT=document.getElementById('LExtra'); eXTXT.style.display='block';
   var eXTXT=document.getElementById('LOpen'); eXTXT.style.display='none'; return false;">Laplace Table</button>
  </strong>
</div>
<div id="LExtra" style="display:none">
  <button onclick="var eXTXT=document.getElementById('LExtra'); eXTXT.style.display='none';
   var eXTXT=document.getElementById('LOpen'); eXTXT.style.display='block'; return false;">Close Table</button>
  <img align="middle" alt="" src="images/LaplaceTransformFormulaSheet.jpeg" style="width: 500px; height: 464px;" />
</div>

---

Another Example

This example opens up a small section to explain a concept. In Mobius the pop-open section is in a Definition box.

Give an exact answer, not a calculator one.

The code :

<p>Give an&nbsp; <button onclick="var eXTXT=document.getElementById('ExtraF'); eXTXT.style.display='block'; return false;">exact</button> answer, not a calculator one.</p>

<div id="ExtraF" style="display:none">
<div class="mSlide-block mSlide-block-type2" data-block-name="Definition">
<p><strong>Exact Answers</strong></p>

<p>An exact answer uses (if possible) symbols, not decimal expansions. For example <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>π</mi></mrow></math> is exact, 3.141593... is not exact no matter how many decimals you use. Other examples where a calculator answer is not exact are <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mstyle displaystyle="true"> <mfrac> <mrow><mn>3</mn></mrow><mrow> <mn>7</mn> </mrow></mfrac></mrow></math>, <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msqrt><mrow><mn>2</mn></mrow></msqrt></mrow></math>, <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mrow><mi mathvariant="italic">e</mi></mrow><mrow><mn>2</mn></mrow></msup></mrow></math>, <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow data-cke-white-space-first="1" data-cke-white-space-last="1"> <mi>sin</mi> <mfenced close=")" data-cke-white-space-last="1" open="("> <mrow> <mfrac> <mrow> <mn>5</mn> <mi mathvariant="italic">π</mi> </mrow> <mrow> <mn>7</mn> </mrow> </mfrac> </mrow> </mfenced></mrow></math>.</p>

<p align="right"><button onclick="var eXTXT=document.getElementById('ExtraF'); eXTXT.style.display='none';return
false;">Close</button></p> </div> </div>

---

Additional Examples

Specific examples are found here.

1. Improper Integral Types
2. Input Rules
3. Matrix Calculator

---