<style type="text/css">

.expander { display:block; width:400px; height:24px; padding:5px 0px 0px 33px; margin:10px 0px 10px 0px; cursor:pointer; font-weight:bold; color:#000066; }
.expanderHalfClosed {  background:url(images/back_expanders_half_closed.jpg) no-repeat; }
.expanderHalfOpen { background:url(images/back_expanders_half_open.jpg) no-repeat; }
.expanderFull { display:block; width:521px; height:24px; padding:5px 0px 0px 33px; margin:10px 0px 10px 0px; cursor:pointer; font-weight:bold; color:#000066; }
.expanderFullClosed {  background:url(images/back_expanders_full_closed.jpg) no-repeat; }
.expanderFullOpen { background:url(images/back_expanders_full_open.jpg) no-repeat; }
.hide { display:none; }

</style>

<script type="text/javascript">

// Content expander jQuery
$(document).ready(function() {

    $("div.expander").click(function() {
        if ($(this).hasClass("expanderHalfClosed")) {
            $(this).removeClass("expanderHalfClosed");
            $(this).addClass("expanderHalfOpen");
        }
        else {
            $(this).removeClass("expanderHalfOpen");
            $(this).addClass("expanderHalfClosed");
        }
    });

    $("div.expanderFull").click(function() {
        if ($(this).hasClass("expanderFullClosed")) {
            $(this).removeClass("expanderFullClosed");
            $(this).addClass("expanderFullOpen");
        }
        else {
            $(this).removeClass("expanderFullOpen");
            $(this).addClass("expanderFullClosed");
        }
    });

});

</script>

<div onclick="$('#number1').toggle();" class='expanderFull expanderFullClosed'>Legal</div>
<div id='number1' class='hide'>
CONTENT</div>

<div onclick="$('#number2').toggle();" class='expanderFull expanderFullClosed'>Tax</div>
<div id='number2' class='hide'>
CONTENT</div>

<div onclick="$('#number3').toggle();" class='expander expanderHalfClosed'>Administration</div>
<div id='number3' class='hide'>
CONTENT</div>

Accordion Content Expander

jQuery