This is a cool trick I got from another website - movalog, from an article dated 2006. This effect involves using some HTML, CSS and some JavaScript, but don't let that stop you. Most of this code is copy and paste-able, and with a few minor changes you can have it working on your site.

Demo:

The effect works something like this: show/hide >>

And you can do it twice!

How to Show/Hide Text onClick

This is basically the exact code I have used in the grey box above, so you can just copy and paste it in the right place, and it should work for you!

HTML:

<p>The effect works something like this: <a href="javascript:;" onclick="toggle_visibility('showtext1');">show/hide</a>
</p>
<div id="showtext1" style="display:none">
<p>This is some filler text, to demonstrate what this technique can do. This is some filler text, to demonstrate what this technique can do. This is some filler text, to demonstrate what this technique can do. This is some filler text, to demonstrate what this technique can do.
</p>
</div>

JavaScript:

<script type="text/javascript">// <![CDATA[
function toggle_visibility(showtext1) {
var e = document.getElementById(showtext1);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
// ]]></script>

HTML Explaination:

You can copy the HTML straight from the grey box, then in your Joomla article editor click the "Toggle editor" button at the bottom of the text input screen. This takes you direct input mode (ie. not the "What You See Is What You Get" mode).

What is in itallics is what you will see on your finished page. Edit this part in the WYSIWYG mode.

The underlined showtext1 is the ID that is linked to the JavaScript. You can change this to whatever you want, but you need to change it in four places (2 in HTML, 2 in JS).

The underlined style="display:none" is what determines if the hidden text is shown or hidden by default. Leave this as is to have your text hidden by default. If you want your text to be shown by default, but still want your visitors to be able to minimise the text, just delete style="display:none".

JavaScript Explaination:

This JavaScript can be added to your page the same way as the HTML code. Simply toggle your Joomla article editor out of WYSIWYG mode and paste the JavaScript code at the bottom of the page.

For Multiple Hide/Show Areas:

If you want to hide different areas of text independently, you need to give each one a different ID.

The HTML should be the same for each area, but the ID showtext1 should be different for each area. Ie. showtext1 then the next area's html will be changed to showtext2, and so on.

In the JavaScript, simply put all the ID's inside the brackets containing showtext1 in the example and seperate them with comma's. Ie. (showtext1, showtext2) or as many as you need.