Expanding Divs w/ Links & Images

Dynamically expanding div tags that also have active links in the heading and toggling images. Leveraging jQuery slideToggle and toggleClass. stopPropagation is used to open the link without expanding the div.

by Phil Wolpers

HTML

<div class="headerExpand"><a href="#">Heading 1</a><br /></div>
        <div class="contentExpand">
            <p>content content content content content.  content content content content content.  content content content content content.</p>
            <p>content content content content content.  content content content content content.  content content content content content.</p>
        </div>
        <div class="headerExpand"><a href="#">Heading 2</a><br /></div>
        <div class="contentExpand">
            <p>content.</p>
        </div>

CSS

.headerExpand {
    background: url('https://www.processdash.com/static/teamhelp/Images/icon-plus.png') no-repeat;
    background-position: right center;
    cursor: pointer;
    padding-bottom: 5px;
    padding-top: 5px;
}

.headerExpand:hover {
    background-color: #eee;
}
.contentExpand {
    padding: 5px 10px;
}

.minus {
    background: url('https://www.processdash.com/static/teamhelp/Images/icon-minus.png') no-repeat;
    background-position: right center;

}

JavaScript

$(function(){
    $(".contentExpand").hide();
    $(".headerExpand").find("a").click(function(e){e.stopPropagation()});
    $(".headerExpand").click(function(){
        var this_header = $(this);
        $(this).next(".contentExpand").slideToggle(300, function(){
            this_header.toggleClass("minus");
        });
        return false;
    });
});