jquery accordion

computeach example refined accordion

by seemly

HTML

<div class="contentBlock">
    <div class="toggleHeader active odd"></div>
    <div class="toggleContent odd"></div>
</div>
<div class="contentBlock">
    <div class="toggleHeader"></div>
    <div class="toggleContent"></div>
</div>
<div class="contentBlock">
    <div class="toggleHeader odd"></div>
    <div class="toggleContent odd"></div>
</div>
<div class="contentBlock">
    <div class="toggleHeader"></div>
    <div class="toggleContent"></div>
</div>

CSS

.contentBlock .toggleHeader.active {
    background:#000;
}

/**/
.toggleHeader {
    height: 50px;
    background: red;
    margin: 5px;
    cursor: pointer;
}
.toggleHeader.odd {
    background: orange;
}
.toggleContent {
    height: 400px;
    background: blue;
    margin: 5px;
}
.toggleContent.odd {
    background: green;
}

JavaScript

var trigger = $('.toggleHeader');
var panel = $('.toggleContent');

$(panel).not(':first').hide();

$(trigger).click(function () {
    if(!$(this).hasClass("active")) {
        $('.active').removeClass('active').next().slideUp();
        $(this).addClass('active').next().slideDown();
    }
});