plusminuscollapse.js

<script type="text/javascript">

    console.log("script rendered"); 

    var topicSort = {

        parentTopics: $(".categories>ul>li>h4"),
        initTopicSort: function () {
            var topicSort = this;

            this.parentTopics.each(function (index) {
                var that = $(this);

                //cache this variable so that we can operate on parent titles only
                that.children("span.label-holder").children("a").children("span.icon").addClass("glyphicon glyphicon-plus");
                that.children("span.label-holder").children("a").attr("data-toggle", "collapse").attr("href", "#collapse" + index);


                var childTopics = that.siblings("ul");
                childTopics.attr("id", "collapse" + index).addClass("collapse").addClass("well");
                childTopics.find("span.label-holder").addClass("label label-default");


                //You might only need this part of the code 
                childTopics.on("show.bs.collapse", function (evt) {
                    console.log(evt); 
                    topicSort.toggleCollapse(evt);
                });

                childTopics.on("hide.bs.collapse", function (evt) {
                    console.log(evt);
                    topicSort.toggleCollapse(evt)
                });
            });

            

        },

        toggleCollapse: function (evt) {
            console.log("toggleCollapse called");
            var targetElem = $(evt.currentTarget);
            console.log(targetElem); 
            //get sibling
            var sibling = targetElem.siblings("h4");
            console.log(sibling); 
            var iconElem = sibling.find("span.icon.glyphicon");
            console.log(iconElem); 

            iconElem.toggleClass("glyphicon-plus");
            iconElem.toggleClass("glyphicon-minus");

        }
    }

    topicSort.initTopicSort(); 


</script>