jQuery Text verbergen

HTML

<script type="text/javascript">
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>
<div class="hidden">

            <div class="button" id="auf">&#171; AUF &#187;</div>
    
                <span>Hier steht der verborgene Inhalt</span>
     
           <div class="button" id="zu">&#187; ZU &#171</div>         
                
</div>

CSS

.button {margin:0.3em 1em 0.3em 1em; cursor:pointer; color:#c00; font-weight:bold;}

.hidden #auf { 
    display: block;
    text-align:center;
}
.hidden #zu{
    display: none;
    text-align:center;
}
.hidden span {
    display: none;
    text-align:center;
}
.click #auf {
    display: none;
}
.click #zu{
    display: block;
}
.click span {
    display: block;
}

JavaScript

$(".button").click( function() {$(this).parent().toggleClass("click")});