Panel reveal

HTML

<div class="item">
    <h3><a href="#">Title 1</a></h3>
    <div class="details">
        <p>Lorem Ipsum dolor sit</p>
    </div>
</div>
<div class="item">
    <h3><a href="#">Title 2</a></h3>
    <div class="details">
        <p>Lorem Ipsum dolor sit</p>
    </div>
</div>
<div class="item">
    <h3><a href="#">Title 3</a></h3>
    <div class="details">
        <p>Lorem Ipsum dolor sit</p>
    </div>
</div>

CSS

body {
    padding:10px;
}

.item {
    border-top:1px solid #888;
    border-right:1px solid #888;
    border-left:1px solid #888;
    margin-bottom:10px;
}

.item h3 {
    border-bottom:1px solid #888;
}

.item h3 a {
    display:block;
    background:#EEE;
    padding:5px 10px;
}

.details {
    padding:10px;
    display:none;
    border-bottom:1px solid #888;
}

.display {
    display:block;
}

JavaScript

/* $('.item h3 a').click(function () {
    $(".item > div.details").toggleClass("display");
}); */
$('.item h3 a').click(function () {
    $(this).parent().siblings(".details").toggleClass("display");
});