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

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -