Expand/collapse section

by doug65536

HTML

<div class="content-form">
    <div class="conference-item">
        <img style="float:left" src="images/down.png" class="conf-img" />
        <p style="float:left; margin-top:5px; margin-left:10px">Connectel Test</p>
        <p style="float:right; margin-top:5px;">10:15 13/08/14</p>
    </div>
    <div class="conference-item">
        <img style="float:left" src="images/down.png" class="conf-img" />
        <p style="float:left; margin-top:5px; margin-left:10px">Connectel Konferens</p>
        <p style="float:right; margin-top:5px;">10:15 13/08/14</p>
    </div>
    <div class="conference-item">
        <img style="float:left" src="images/down.png" class="conf-img" />
        <p style="float:left; margin-top:5px; margin-left:10px">Connectel MÃ¥ndag</p>
        <p style="float:right; margin-top:5px;">10:15 13/08/14</p>
    </div>
</div>

CSS

div.conference-item {
    position: relative;
    width:450px;
    height:35px;
    border:1px solid #ccc;
}

JavaScript

$(function () {
    $('.conf-img').each(function() {
        var shown = false;
        $(this).click(function () {
            var parent = $(this).parent();
            parent.animate({ height: (shown ? '30px' : '300px') });
            shown = !shown;
        });
    });
});