Print Friendly and PDF
Name *
Name
Think this could help your friends? Let them know where to find it!

Output element sample

Output element sample

Demo showing output element in HTML5

Principal
Duration
Interest Rate
Total amount

HTML Goodies


[ Open All | Close All ]

1] Example & Explanation:
This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers. Clicking on the header when the text is seen hides the text. Additionally if a header is clicked it will automatically close any open text related to any other header while opening its own hidden text.

2] Compatibility:
This script works with all the newer versions of browsers like IE5+, NS6, Opera and Firefox.
This script does not work with older browsers like NSv4.x but degrades very well.

3] Notes:
This is one of the most compact scripts of this nature that you can find in any JavaScript archives.

Note: For the above to work, there is code in the header that needs to be present as well as the code in the code block.

Note to self: should make these bigger and everything function as a percentage of the parent element size so they resize well