example.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.accordionHead').unbind('click').bind('click', function() {
            $('.open').removeClass('open').slideUp('fast');
           
            $(this).next('.accordionContent').slideDown('fast', function() {
                $(this).addClass('open');
            });
        });
    });
</script>

<h2 class="accordionHead" style="cursor: pointer">my headline 1</h2>
<div class="accordionContent" style="display:none">
    content 1
</div>
<h2 class="accordionHead" style="cursor: pointer">my headline 2</h2>
<div class="accordionContent" style="display:none">
    content 2
</div>
<h2 class="accordionHead" style="cursor: pointer">my headline 3</h2>
<div class="accordionContent" style="display:none">
    content 3
</div>