You can easily show and hide text blocks in a html file when you place this script in the head-section of your html file (between <head> and </head>).
<script type="text/javascript">
document.write("<style type='text/css'>.hidden{display:none}<\/style>") //hide all texts, except when javascript is off.
function show(area){
var obj = document.getElementById(area)
obj.style.display=(obj.style.display=='block')?'none':'block'
}
</script>
This is how it looks between the body-tags (between <body> and </body>):
There is some text which is hidden. <a href="javascript:show('test');">show/hide</a>
<div class="hidden" id="test">Yes, this was hidden.<br>bladiebla bladiebladiebla was also hidden.</div>
<div>The quick brown fox jumps over the lazy dog. <a href="javascript:show('hiddentext1');">+/-</a></div>
<p class="hidden" id="hiddentext1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
This is just normal text ... bla bla<br> This is just normal text ... bla bla
<div>This is a story about an imaginary house. Do you want to know more about it? <a href="javascript:show('hiddentext2');">more/less</a></div>
<div class="hidden" id="hiddentext2">Sorry, the house was never built...</div>
This is the result, just test it yourself:
There is some text which is hidden. show/hide