Bootstrap collapse not working (+ and - signs is not changing)

Question

I am using bootstrap classes for collapse. When I click on the + symbol, it is not changing to the - symbol.

Here is my code. Please help me out.

var selectIds = $('#collapseOne1,#collapseTwo1');
$(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {          
        $(this).prev().find('.fa').toggleClass('fa-minus fa-plus');
    })
});

<div class="accordion" >
    <div class="panel-group" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <a id="submitid" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">
                        Submitted
                        <i class="fa fa-plus pull-right"></i>
                    </a>
                </h3>
            </div>
            <div id="collapseTwo1" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul>
                        @foreach(var item in ViewBag.consultant)      
                        {
                            <li><strong>@item </strong></li>
                        }
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading active">
                <h3 class="panel-title">
                    <a id="rejectid" class="accordion-toggle active" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">
                        Rejected
                        <i class="fa fa-minus pull-right"></i>
                    </a>
                </h3>
            </div>
            <div id="collapseOne1" class="panel-collapse in">
                <div class="panel-body">
                    <div class="media accordion-inner">
                        <div class="media-body">
                            <ul>
                                @foreach(var item in ViewBag.consultant)      
                                {
                                    <li><strong>@item </strong></li>
                                }

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>     
    </div>
</div>

When I click on 'Submitted' the + symbol is still showing. Not changed to - symbol.

<script src="~/js/jquery-ui-1.10.3.min.js"></script>
<script src="~/js/jquery-ui-1.10.3.js"></script>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<link href="~/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/css/bootstrap.min.css" rel="stylesheet" />

Answer 1

Below is a working fiddle with the exact code you are providing so I guess the problem lies in the way you load the js files, do you have any errors in your browser console?

http://jsfiddle.net/196dyxk8/

var selectIds = $('#collapseOne1,#collapseTwo1');
$(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {          
        $(this).prev().find('.fa').toggleClass('fa-minus fa-plus');
    })
});