twitter-bootstrap 单击时引导手风琴图标更改

bootstrap accordion icon change in click

提问by Javascript Coder

I am using bootstrap accordion in my code. On click on every list I will display Data and Icon will change.

我在我的代码中使用引导手风琴。单击每个列表时，我将显示数据，图标将更改。

<i class="fa fa-plus-square"></i>

will change to

将更改为

<i class="fa fa-minus-square"></i>

My code:-

我的代码：-

<div class="priority-lists">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
                 <h2 class="panel-title accordion-toggle">
                                                <i class="fa fa-minus-square"></i>
                                                WaterMind District Meters
                                            </h2>

            </div>
            <div id="waterMindDistrictMeteres" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
                 <h2 class="panel-title accordion-toggle">
                                                <i class="fa fa-minus-square"></i>
                                                WaterMind Pressure Points
                                            </h2>

            </div>
            <div id="waterMindPressurePoints" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
                 <h2 class="panel-title accordion-toggle">
                                                <i class="fa fa-minus-square"></i>
                                                WaterMind Service Points
                                            </h2>

            </div>
            <div id="waterMindServicePoints" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row">
                        <div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I tried to use some code:

我尝试使用一些代码：

My jsFiddle code

我的 jsFiddle 代码

I will see icon are not working properly. I am looking for solution in CSS or JavaScript or jQuery.

我会看到图标无法正常工作。我正在寻找 CSS 或 JavaScript 或 jQuery 的解决方案。

回答by Andreas Furster

You have to add .collapsedto your panel-headings! The first time .collapsedis not on that element, but bootstrap updated it on a click.

您必须添加.collapsed到面板标题中！第一次.collapsed不是在那个元素上，但是引导程序在单击时更新了它。

It does work fine by me now.

我现在做的很好。

Updated fiddle

更新的小提琴

回答by uzair_hashmi89

Please check on this link

Js Fiddle

Js小提琴

You must add a class "collapsed" next to "panel-heading". your problem will be solved

回答by KmeCnin

You should init your icons with : fa-plus-square, not fa-minus-square.

你应该用 : 来初始化你的图标fa-plus-square，而不是fa-minus-square。