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

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

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

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

• "not working properly" It seems to be working fine in Chrome 38. – Mooseman Commented Oct 10, 2014 at 10:14
• Working just fine in firefox 32 :) – Bojan Petkovski Commented Oct 10, 2014 at 10:15
• No, I see an error here, they all launch as minus's and when you click on it turns into the propper icon it should be. – Dorvalla Commented Oct 10, 2014 at 10:18
• yes true @Dorvalla that is what problem I am facing... – FrontEnd Expert Commented Oct 10, 2014 at 10:24

3 Answers 3

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

It does work fine by me now.

Updated fiddle

Please check on this link

Js Fiddle

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

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