JQuery accordion example

by abenrob

HTML

<div class="item">
    <div class="expandacc closed">
        <h1>Lorem</h1>
    </div>
    <div class="contentacc">
        <p>Donec arcu mi, adipiscing nec molestie et, varius in purus. Praesent blandit ipsum sit amet ante varius at posuere lacus dignissim. Maecenas sollicitudin, lacus eget mollis dictum, nisi mi fringilla est, et pharetra ante sem fringilla metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in purus et risus euismod venenatis sit amet ut sapien.</p>
<p>Nunc quam risus, iaculis lacinia feugiat ut, dictum in magna. Fusce tempor turpis sed enim eleifend consectetur. Aliquam erat volutpat. Praesent interdum egestas interdum. </p>
    </div>
</div>
<div class="item">
    <div class="expandacc closed">
        <h1>Hipster</h1>
    </div>
    <div class="contentacc">
        <p>Sustainable freegan yr in, enim whatever raw denim marfa proident id street art. Assumenda gluten-free lo-fi fingerstache fap ethical whatever. Small batch gluten-free fingerstache raw denim yr, letterpress laborum semiotics kale chips eiusmod truffaut mustache master cleanse put a bird on it sartorial. Cred tofu yr odio.</p>

<p>Accusamus tempor twee cupidatat, minim before they sold out sustainable culpa nostrud fugiat ex seitan synth. Brooklyn artisan truffaut mollit cillum vegan. Thundercats kale chips bicycle rights banksy consequat fanny pack. Portland letterpress photo booth pop-up jean shorts. Keffiyeh irure fap chambray brooklyn seitan.</p>
    </div>
</div>
<div class="item">
    <div class="expandacc closed">
        <h1>Bacon</h1>
    </div>
    <div class="contentacc">
        <p>Bacon ipsum dolor sit amet sausage ball tip ham hock turkey venison boudin salami swine pork chop shank pork tenderloin beef ribs sirloin. Corned beef pork chop leberkas ground round shankle t-bone cow meatball short loin chuck brisket sirloin tri-tip short ribs. Beef ribs sirloin beef meatloaf, strip steak shankle ham pig chuck ground round jowl leberkas. Leberkas...

CSS

.item {width: 400px;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
}
.item .expandacc {
    cursor: pointer;
    padding: 3px 0px 3px 10px;
    background: #9999CC;
    margin: 3px 0px 3px 0px;
    width: 400px;
}
.item .expandacc h1 {
    color: #FFF;
    font-size: 15px;
    font-weight: bold;
    background: url(http://goo.gl/VzQdn) 0px center no-repeat;
    background-size: 15px, 15px;
    padding-left: 25px;
}
.item .expandacc.open h1{
    background-image: url(http://goo.gl/Cbuf2);
}
.item .contentacc {
    display:none;
    padding: 5px 10px 5px 10px;
    font-size: 12px;
}

JavaScript

jQuery('.item .expandacc').click(function() {
    jQuery('.item .expandacc').not(this).removeClass("open").addClass("closed").siblings('.contentacc').slideUp('normal');
    jQuery(this).next('.contentacc').slideToggle('normal');
    jQuery(this).toggleClass("closed").toggleClass("open");
});