Acordeón ultra simple

by hugosolar

HTML

<div class="slide-item">
    <h3 class="title-content"><a href="#">Esto es un titulo para hacer click</a></h3>
    <p class="the-content hide">Loren ipsum dolor sit amet sjdhkfj jkjkl wnkj nkjndk k</p>
</div>
<div class="slide-item">
    <h3 class="title-content"><a href="#">Esto es un titulo para hacer click</a></h3>
    <p class="the-content hide">Loren ipsum dolor sit amet sjdhkfj jkjkl wnkj nkjndk k</p>
</div>
<div class="slide-item">
    <h3 class="title-content"><a href="#">Esto es un titulo para hacer click</a></h3>
    <p class="the-content hide">Loren ipsum dolor sit amet sjdhkfj jkjkl wnkj nkjndk k</p>
</div>

CSS

.hide { display: none; }
.title-content a { display: block; }
.title-content.active a { background: #C0C0C0; }
.the-content { font-weight: bold; background: #C0C0C0; height: 200px; padding: 10px;}

JavaScript

$('.slide-item h3').delegate('a','click',function(){
    $('title-content').removeClass('active');
    var obj = $(this);
    obj.parent().next().slideToggle('slow',function(){
         obj.parent().toggleClass('active', obj.parent().next().is(':visible'));
    });
    
    return false;
});