ASP.NET MVC 5 Bootstrap Accordion Not Working Correctly

Question

I am trying to use the Accordion feature in Bootstrap. The problem is that the minus buttons never change to plus upon clicking (and vice versa).

Here is my HTML code:

<div class="container">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    <span class="glyphicon glyphicon-minus"></span>
                    Incident Details
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr>
                        <th>Response Text</th>
                        <th>Username</th>
                        <th>Date & Time of Update</th>
                    </tr>
                    @if (ViewBag.Data != null)
                    {
                    foreach (OfficiumWebApp.Models.ResponseViewModel item in ViewBag.Data)
                    {
                    <tr>
                        <td>@item.ResponseText</td>
                        <td>@item.Username</td>
                        <td>@item.DateTimeOfUpdate</td>
                    </tr>
                    }
                    }
                </table>
            </div>
        </div>
    </div>
</div>

The JavaScript code here:

    <script type="text/javascript">
    $(document).ready(function(){    
        $('.collapse').on('shown.bs.collapse', function () {
            $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hidden.bs.collapse', function () {
            $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>

I cant see what I'm doing wrong? Any help would be great!

Answer 1

Your custom javascript is working as expected with the default accordion markup ie

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                 <span class="glyphicon glyphicon-minus"></span>
              Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche. Minim qui you in1.com probably haven't heard of them et cardigan trust fund culpa biodiesel.
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                 <span class="glyphicon glyphicon-plus"></span>
              Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
</div>

Please see here for a working example:

http://bootply.com/113766

You might want to check that your markup matches the above when rendered and that all the javascript resource files are loading.

Answer 2

Make sure jQuery reference is rendering out, it jQuery event is not firing up. you can test it using alert in the jQuery function, if it fires mean jQuery is working if not then need to tweak it it little.