$(document).ready(function() {

    $('.collapsible').each(collapse);
});

var collapse = function(i) {
    var expandImg = "/images/expand.jpg";
    var collapseImg = "/images/collapse.jpg";

    var elem = $(this);
    var header = elem.find('.collapseHeader');
    var content = elem.find('.collapseContent');

    var collapsed = content.hasClass("collapsed");

    var id = elem.attr("id") || header.attr("id") || content.attr("id");


    // set initial state
    if (collapsed)
        content.addClass("collapsed");
    else
        content.removeClass("collapsed");

    // add img
    if (header.find('img.collapseIcon').length == 0) {
        header.append($('<img src="' + (collapsed ? expandImg : collapseImg) + '" class="collapseIcon"/>'));

        header.click(function() {
            content.toggle(500).toggleClass('collapsed');
            var collapsed = content.hasClass("collapsed");
            if (collapsed)
                header.children(".collapseIcon").attr('src', collapseImg);
            else
                header.children(".collapseIcon").attr('src', expandImg);
        });
    }
}