Extending Bootstrap Accordion

customize accordion to display toggle icon glyphs

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <div class="panel-group" id="accordion">
            <!-- -- -- -- -- -- -->
            <!-- begin country -->
            <!-- -- -- -- -- -- -->
            <div class="panel panel-primary">
                <div class="panel-heading">
                     <h1 class="panel-title">
                         <a data-toggle="collapse" data-parent="#accordion" href="#country">Country Music</a>
                         <a class="pdsa-panel-toggle"></a>
                    </h1>

                </div>
                <div id="country" class="panel-collapse collapse in">
                    <div class="panel-body">
                         <h2>Country</h2>

                    </div>
                </div>
            </div>
            <!-- -- -- -- -- -- -->
            <!-- begin rock -->
            <!-- -- -- -- -- -- -->
            <div class="panel panel-primary">
                <div class="panel-heading">
                     <h1 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                     href="#rock">Rock Music</a>
                     <a class="pdsa-panel-toggle"></a>
                </h1>

                </div>
                <div id="rock" class="panel-collapse collapse">
                    <div class="panel-body">
                         <h2>Rock</h2>

                    </div>
                </div>
            </div>
            <!-- -- -- -- -- -- -->
            <!-- begin jazz -->
            <!-- -- -- -- -- -- -->
            <div class="panel panel-primary">
                <div class="panel-heading">
                     <h1 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                     href="#jazz">Jazz Music</a>
                     <a class="pdsa-panel-toggle"></a>
                </h1>

                </div>
                <div id="jazz"...

CSS

.panel > .panel-heading > .panel-title > a {
    text-decoration:none;
}
.pdsa-panel-toggle {
    float:right;
    cursor:pointer;
}

JavaScript

// now, we need to toggle the glyphicons when the accordion is changed
    function toggleGlyphs(ctrl) {

        if ($(ctrl).hasClass("glyphicon glyphicon-chevron-up")) {
            $(ctrl).removeClass("glyphicon glyphicon-chevron-up");
            $(ctrl).addClass("glyphicon glyphicon-chevron-down");
            
        } else { // currently has down
            $(ctrl).removeClass("glyphicon glyphicon-chevron-down");
            $(ctrl).addClass("glyphicon glyphicon-chevron-up");
        }
    }

$(document).ready(function () {
    // add the down glyph to all elements that have the class 'pdsa-panel-toggle'
    $(".pdsa-panel-toggle").addClass("glyphicon glyphicon-chevron-down");


    // the panel-collapse class also containing the class name 'in' means its being displayed
    // so we should find all of those, then get the id attribute of that div, 

    var list = $(".in");
    // find the anchor tag that contains the Id within its href attrib.
    // so loop through all you found and change the NEXT element's glyphicon
    // then remove the chevron-down glyph
    // and add the chevron-up glyph
    for (var i = 0; i < list.length; i++) {

        $($("a[href='#" + $(list[i]).attr("id") + "']")).next()
            .removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");


    }



    // when the chevron is clicked, it has to do stuff
    $(".pdsa-panel-toggle").click(function () {
        // retrieve the previous anchor tags href attrib so yo ucan toggle it
        $($(this).prev().attr("href")).collapse("toggle");
        // change the glyph
        toggleGlyphs($(this));
    });

    // toggle glyphs when the toggle link is clicked
    $("a[data-toggle='collapse']").click(function () {
        toggleGlyphs($(this).next());
    });
});