javascript - bootstrap accordion icon change in click -
I am using Bootstrap accordion in my code, when I click on each list, I will display the data and icon.
& lt; I class = "fa fa-plus-square" & gt; & Lt; / I & gt;
& lt; I square = "fa fa-minus-square"> gt; & Lt; / I & gt; Will change in My code: -
& lt; Div class = "priority-lists" & gt; & Lt; Div class = "panel-group" id = "accordion" & gt; & Lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title" data-toggle = "fall" data-parent = "# accordion" data-target = "# waterMindDistrictMeteres" & gt; & Lt; H2 square = "panel-title-order-toggle" & gt; & Lt; I class = "fa-minus-square" & gt; & Lt; / I & gt; Jalmanjind district meters & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div id = "waterMindDistrictMeteres" class = "panel-fall collapse" & gt; & Lt; Div class = "panel-body" & gt; & Lt; Div class = "row" & gt; & Lt; Div id = "servicepoint grid" watermind-priority-lists kendo-grid k-options = "watermindDetailGridOptions" k-rebind = "watermindDetailGridOptions" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title" data-toggle = "fall" data-parent = "# accordion" data-target = "# waterMindPressurePoints" & gt; & Lt; H2 square = "panel-title-order-toggle" & gt; & Lt; I class = "fa-minus-square" & gt; & Lt; / I & gt; Water Mind Pressure Points & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div id = "waterMindPressurePoints" class = "panel-fall collapse" & gt; & Lt; Div class = "panel-body" & gt; & Lt; Div class = "row" & gt; & Lt; Div id = "servicepoint grid" watermind-priority-lists kendo-grid k-options = "watermindDetailGridOptions" k-rebind = "watermindDetailGridOptions" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "panel-panel-default" & gt; & Lt; Div class = "panel-title" data-toggle = "fall" data-parent = "# accordion" data-target = "# waterMindServicePoints" & gt; & Lt; H2 square = "panel-title-order-toggle" & gt; & Lt; I class = "fa-minus-square" & gt; & Lt; / I & gt; Watermind service points & lt; / H2 & gt; & Lt; / Div & gt; & Lt; Div id = "waterMindServicePoints" class = "collapse in panel-fall" & gt; & Lt; Div class = "panel-body" & gt; & Lt; Div class = "row" & gt; & Lt; Div id = "servicepoint grid" watermind-priority-lists kendo-grid k-options = "watermindDetailGridOptions" k-rebind = "watermindDetailGridOptions" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; I tried to use some code:
I would see that the icon is not working properly. I am looking for solutions in CSS or Javascript or jQuery.
You have to add . Collapsed on your panel-titles! P>
Comments
Post a Comment