Simple show/hide with jQuery

A simple demo that allows you to toggle an element's display state

HTML

<div class="listings">Listings 1</div>

<div class="show">
Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here...
</div>


<div class="listings">Listings 2</div>

<div class="show">
Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here... Some text goes here...
</div>

CSS

.listings {
    font-weight: bold;
    cursor: pointer;
}
.show {
    display: none;
}

JavaScript

$(document).ready(function () {
    $(".listings").on('click', function () {
        $(".show").not($(this).next(".show")).slideUp(300);
        $(this).next(".show").slideToggle(300);
    });
});