CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
FrontEnd Expert
FrontEnd Expert

Reputation: 5803

bootstrap accordion icon change in click

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.

Upvotes: 1

Views: 19279

Answers (3)

Andreas Furster
Andreas Furster

Reputation: 1638

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

Upvotes: 6

uzair_hashmi89
uzair_hashmi89

Reputation: 187

Please check on this link

Js Fiddle

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

Upvotes: 4

KmeCnin
KmeCnin

Reputation: 527

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

Upvotes: 3

Related Questions