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!

hutchonoid · Accepted Answer · 2014-02-14 17:07:18Z

1

Your custom javascript is working as expected with the default accordion markup i.e.

<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.

edited Feb 14, 2014 at 17:07

answered Feb 14, 2014 at 15:41

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ASPCoder1450 Over a year ago

I don't think that my JavaScript is loading and I'm not sure why? Is there way to check resource files are loading?

hutchonoid Over a year ago

In chrome I use the dev tools, you can check the network tab for 404's or look in the resource section.

marc_s · Accepted Answer · 2017-03-22 20:35:29Z

0

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.

edited Mar 22, 2017 at 20:35

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 20, 2017 at 4:38

Vikash Sharma

366 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC 5 Bootstrap Accordion Not Working Correctly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related