Content folding in Calcpad

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:

http://calcpad.net/Worksheet/159/sls-design-of-beam-with-rectangular-section

Click “Calculate” to see the results:

sls beam

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s