Bootstrap Accordion Adding Class to Expanded Row

Only allow one row to be expanded at a time. When a row is expanded it gets a yellow background. When it is collapsed, the background is removed.

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<div id="accordion" class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="accordion-toggle" href="#collapseOne">What will it cost</a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <p>It will cost a fortune.</p>
        </div>
    </div>
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="accordion-toggle" href="#collapseTwo">What will it cost</a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <p>It will cost a fortune.</p>
        </div>
    </div>
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="accordion-toggle" href="#collapseThree">What will it cost</a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            <p>It will cost a fortune.</p>
        </div>
    </div>
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="accordion-toggle" href="#collapseFour">What will it cost</a></h4>
    </div>
    <div id="collapseFour" class="panel-collapse accordion-body collapse">
        <div class="panel-body">
            <p>It will cost a fortune.</p>
        </div>
    </div>
</div>

CSS

.panelBackground { background-color: yellow; }

JavaScript

$(document).ready(function() {
    
    $('.accordion-toggle').click(function() {
        
        // Remove class from all other <a> tags not clicked on
        $('.accordion-toggle').not($(this)).removeClass('panelBackground');
        
        // Use toggleClass to add the class if it is being opened
        // or remove the class if it's being closed
        $(this).toggleClass('panelBackground');
        
        // Handle the expanding/collapsing
        // This code will only allow one row to be open at a time
        $('#accordion').on('show', '.collapse', function() {
            $('#accordion').find('.collapse.in').collapse('hide');
        });
    });
    
});