Bootstrap 3.0 Accordian Alternative

Bootstrap Accordian Group that collapses when clicking whole div, and has chevrons

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="priority-lists">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
                 <h2 class="panel-title accordion-toggle">
                                            
                            WaterMind District Meters
</h2>

            </div>
            <div id="waterMindDistrictMeteres" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">ashfash vhasv fhabshbfabsjfbajs hasf</div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
                 <h2 class="panel-title accordion-toggle">
                                           
                                            WaterMind Pressure Points
                                        </h2>

            </div>
            <div id="waterMindPressurePoints" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">dshbfs sjd hjbsdjbfhbs dfsdf</div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
                 <h2 class="panel-title accordion-toggle">
                                            
                                            WaterMind Service Points
                                        </h2>

            </div>
            <div id="waterMindServicePoints" class="panel-collapse collapse">
                <div class="panel-body">
                    <div...

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
 @import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
 .panel-heading {
    cursor: pointer;
}
/* CSS Method for adding Font Awesome Chevron Icons */
 .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f146";
    float: right;
    color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f0fe";
}