Fix twitter bootstrap collapse icons, glyphicons

Question

I changed twitter bootstrap's behaviour so the whole panel-heading would trigger the accordion. This results in the 'up' icon not changing in the 'down' icon anymore.

I am trying to fix this, but to no avail. How can I restore the correct behaviour of these icons?

<script>
        $(document).ready(function() {
            $('.accordion-toggle').on('click', function(e) {
                e.preventDefault();
                if (!$('.panel-collapse').hasClass('.collapsed')) {
                    console.log('toggle collapsed class')
                    $('.indicator').removeClass('.glyphicon-chevron-up');
                    $('.indicator').addClass('.glyphicon-chevron-down');
                }
            });
        });
</script>

Here's the structure of one of my accordion panels:

<div class="panel panel-default">
            <a href="#collapseOne" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">  
                <div class="panel-heading">
                    <i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
                    <h4 class="panel-title">
                        Title
                    </h4>
                </div>
            </a>
            <div id="collapseOne" class="panel-collapse in">
                <div class="panel-body">
                    <center>
                        <p>Some body..</p>
                    </center>
                    <form class="form-search">
                        <h2 class="form-search-heading">Some heading..</h2>
                        <input type="text" class="input-block-level" placeholder="Zoekterm" id="search-box">
                        <div id="resultaten"></div>
                    </form>
                </div>
            </div>
        </div>

PS: I'm using Bootstrap 3.0.1

Answer 1

Don't use periods with the addClass and removeClass methods:

$('.indicator').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');