Collapsing with jQuery

index.html

<div id="collapse-group">
    <div data-toggle="collapse" data-target="#jedi" data-group="#collapse-group">
        <span>Jedi <i class="fa fa-angle-down"></i></span>
    </div>
    <div id="jedi" class="collapse">
        <p>
            May the force be with you
        </p>
    </div>
	
    <!-- more collapse elements -->
</div>

main.css

[data-toggle="collapse"] {
    cursor: pointer;
}

[data-toggle="collapse"] i {
    float: right;
}

.collapse {
    display: none;
}

main.js

$('[data-toggle="collapse"]').click(function () {
    var el = $(this),
        group = $(el).data('group');

    var collapses = $(group).find('[data-toggle="collapse"]:not(.collapsed)').not(this);

    $(collapses).each(function(i, collapse){
        var target = $(collapse).attr('data-target');

        $(target).slideToggle(500, function () {
            hide(this, collapse);
        });
    });

    var target = $(el).attr('data-target');

    $(target).slideToggle(500, function () {
        if ($(target).is(":visible")) {
            show(this, el);
        } else {
            hide(this, el);
        }
    });

    function show(target, el) {
        $(target)
            .removeClass('collapse')
            .addClass('expand');

        $(el)
            .removeClass('collapsed')
            .find('i')
            .removeClass('fa-angle-down')
            .addClass('fa-angle-up');
    }

    function hide(target, el) {
        $(target)
            .removeClass('expand')
            .addClass('collapse');

        $(el)
            .addClass('collapsed')
            .find('i')
            .removeClass('fa-angle-up')
            .addClass('fa-angle-down');
    }
});