Easy Accordion Jquery

Otimizando códigos jQuery.
Criei juntamente com um amigo, Lucas, um código bem enxuto e funcional para accordions verticais que considero valer a pena repassar, mesmo que haja outros vários espalhados pela internet. Basicamente, é um Script que utiliza CSS-Class e Hierarquia para fazer SlideUp e SlideDown.

Vamos ao que interessa, o jQuery.

$(document).ready(function(){
    $('div.jqaccordion_body').hide();
    $('div.jqaccordion_head a.accordion').click(function(){
        $(this).next('div.jqaccordion_body').slideToggle('fast').focus();
        if($(this).children('div.seta').hasClass('setabaixo')){
            $(this).children('div.seta').removeClass('setabaixo').addClass('setalado');      
        }
        else{
        $(this).children('div.seta').addClass('setabaixo').removeClass('setalado');
        }
    });
});

 Com ele, o desenvolvedor e designer poderá, por exemplo, usar quantos quiser um abaixo do outro (ou até dentro de outro, se necessário), sem necessidade de usar IDs para criar a "mágica".

Estrutura HTML:

<div class="jqaccordion_head">
                <a class="accordion" title="Clique para expandir"><div class="seta setalado"></div>T&eacute;tulo do accordion</a>
                <div class="jqaccordion_body">
                    Conteúdo
                </div>
</div>

Folha de Estilo (CSS):

.jqaccordion_head a.accordion{
    width: 100%;
    display: block;
    height: 25px;
    position:relative;
    background: #ccc url(../img/bg_windowbox_header.png) top repeat-x scroll;
    border: solid #999 1px !important;
    border-top:none;
    font-weight:bold;
    text-indent: 5px;
    vertical-align: middle;
    line-height: 25px;
    margin-top:-1px;
    margin-left:-1px;
}
.jqaccordion_head a.accordion:hover{
    background: #eee;
    color:#3399FF;
    cursor:pointer;
}
.jqaccordion_head{
    margin-top: 5px;
    height: auto;
    background: #fff url(../img/bg_windowbox.png) top repeat-x scroll;
    padding: 0px;
    border: solid #999 1px !important;
}
/*configuração das setas */
.setalado{
    background-image: url(../img/setalado.png);
}
.setabaixo{
    background-image: url(../img/setabaixo.png);
}
.seta{
    float:left;
    margin: 5px 0 0 5px;
    width:14px ;
    height:14px;
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    vertical-align:middle;
}

Lmebrando que, é necessário a biblioteca jQuery para funcionar e ainda fazer as imagens para criar o visual, tais como a setas, e etc...

Bom estudo.