We've started using this bit of Javascript to allow users to "minimize" a section of a web page. See http://weather.musc.edu/ for how this works. It even remembers, using magic cookies, what was minimised and what wasn't.

Advanced usage: Tweaking the CSS a bit, using onloads, etc., allows you to start out hidden or hide based on other criteria (when coming from a script, for example).

The javascript is:

function getCookie(n) {
        var c=document.cookie;
        var offset=c.indexOf(n+"=");
        if(offset<0) {
                return 1;
        }
        offset=c.indexOf('=',offset)+1;
        return c.substr(offset,1);
}

function setCookie(n,v) {
        var d=new Date();
        d=new Date(d.getTime() + (34*86400*1000));
        document.cookie=n + '=' + v + '; expires=' + d.toGMTString() ;
}


function toggle(t) {
        var para=document.getElementById(t);
        var tb = document.getElementById('t' + t);
        var htb = document.getElementById('h' + t);
        if(para.style.display!='none') {
                para.style.display = 'none';
                tb.style.display = 'block';
                htb.style.display = 'none';
                setCookie(t,0);
        }
        else {
                para.style.display = 'block';
                tb.style.display = 'none';
                htb.style.display = 'block';
                setCookie(t,1);
        }
        return true;
}


function setpageblocks(ckname) {
        var v = getCookie(ckname);
        if(v==0) {
                toggle(ckname);
        }
}

The CSS is:

.titlebar {
    display: none;
    border: 1px solid;
    font-size: 8pt;
    cursor: pointer;
}
.htitlebar {
    border: 1px solid #cccccc
    font-size: 8pt;
    cursor: pointer;
}
.para {
    border: 1px solid #cccccc;
    padding: 2px;
}

And here's the HTML:

<div class="titlebar" id="texpl" onclick="javascript:toggle('expl')">
Show introduction
</div>
<div class="htitlebar" id="hexpl" onclick="javascript:toggle('expl')">
Hide introduction
</div>

<div class="para" id="expl">
Your content here!
</div>
<script language="javascript">setpageblocks('expl')</script>

'expl' is a magic value that ties all these things together. You can change it to whatever you want, and since it's an ID, it has to be unique on the page -- you can't have two sets of minimizable contents (ugh!) with the same 'expl'.

The rest of the explanation will use 'YOURID' where your ID should go, instead of expl.

The first div, above, has an id equivalent to 'tYOURID'. This div will be shown when the content is hidden or "minimised".

The second div has an id equivalent to 'hYOURID'. It will be hidden when your content is shown or "maximised".

The third div is your content, and has an id equivalent to 'YOURID'.

The various javascript function called from the HTML will have just the one parameter, 'YOURID'. No stray 'h' or 't'.

Here's how you do two separate minimizable paragraphs, just like on the weather page (see above):

<div class="titlebar" id="texpl" onclick="javascript:toggle('expl')">
Show introduction
</div>
<div class="htitlebar" id="hexpl" onclick="javascript:toggle('expl')">
Hide introduction
</div>

<div class="para" id="expl">
Your content here!
</div>
<script language="javascript">setpageblocks('expl')</script>

First paragraph above. Second paragraph below.

<div class="titlebar" id="tintro" onclick="javascript:toggle('intro')">
Show introduction
</div>
<div class="htitlebar" id="hintro" onclick="javascript:toggle('intro')">
Hide introduction
</div>

<div class="para" id="intro">
Your content here!
</div>
<script language="javascript">setpageblocks('intro')</script>