We already know how to hide contents completely in the calculation notes, using output control (#hide-#pre-#post-#show) or Html comments. We already discussed that in the publication: Quadratic equation – part II. However, this is not always a good option. Lets have a look at the online calculation sheet for SLS design of RC beam:
https://calcpad.eu/Worksheet/71/sls-design-of-beam-with-rectangular-section
Click “Calculate” to see the results:
The required calculations for one beam are so many, that it would take about 6 pages to print them all. That is why, most of the details are folded inside the headings:
Concrete creep and shrinkage … ▼
You can always unfold them by clicking on the respective heading in case you need to check something. The content will appear and the heading will change as follows:
Concrete creep and shrinkage ▲
If you click again, the content will fold back. This is an excellent option. You are not forced to print all details for each beam, but only the most important information. In the same time, everything is available when you need to check something. But how it’s made in Calcpad?
Actually, it is pretty easy to do this with just a bit of Html. Just add the following code around the content to be folded:
'<div class="fold"> '<h4>Heading</h4> 'Content to be folded '</div>
In your code, replace “Heading” and “Content to be folded” with the actual text. It is so simple, because most of the work is done preliminarily. Each calculation note starts from an empty Html template, which already contains the required CSS and jQuery code. The template is located in the program directory and it is named “template.html” (obviously). If you are familiar with HTML, CSS and JS/jQuery, you can add some other cool features for your worksheets.
Calcpad 