LP: Improve accordion view when category - refs BT#18869

app/Resources/public/css/base.css

@@ -8544,12 +8544,13 @@ ul#toolnavbox-two li a.btn {
 }
 
 #lp-accordion .panel-default .panel-heading {
-    background: url(../../../../main/img/icons/svg/arrow-down.svg) #FFF right center no-repeat;
+    background: #FFF;
     border-radius: 10px;
+    padding-right: 0;
 }
 
 #lp-accordion .panel-default .panel-heading .tools-actions {
-    padding-right: 20px;
+    margin-right: 32px;
 }
 
 #lp-accordion .panel {
@@ -8560,13 +8561,19 @@ ul#toolnavbox-two li a.btn {
     font-weight: bold;
     width: 100%;
     display: block;
-    padding-top: 5px;
-    padding-bottom: 5px;
 }
 
 #lp-accordion .panel .panel-title a {
     width: 100%;
     display: block;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-image: url(../../../../main/img/icons/svg/arrow-down.svg);
+}
+#lp-accordion .panel .panel-title a[aria-expanded="true"] {
+    background-image: url(../../../../main/img/icons/svg/arrow-top.svg);
 }
 
 #lp-accordion .lp-item {

main/template/default/learnpath/list.tpl

@@ -380,6 +380,7 @@
                 {% endif %}
 
                 {% if categories|length > 1 and lp_data.category.id %}
+                    {% set number = number + 1 %}
                     <div class="panel panel-default">
                         <div class="panel-heading" role="tab" id="heading-{{ lp_data.category.getId() }}">
                             {% if is_allowed_to_edit %}
@@ -463,7 +464,7 @@
                             {% endif %}
                             <h4 class="panel-title">
                                 <a role="button" data-toggle="collapse" data-parent="#lp-accordion"
-                                   href="#collapse-{{ lp_data.category.getId() }}" aria-expanded="true"
+                                   href="#collapse-{{ lp_data.category.getId() }}" aria-expanded="{{ number == 1 ? 'true' : 'false' }}"
                                    aria-controls="collapse-{{ lp_data.category.getId() }}">
                                     {{ lp_data.category.getName() }}
 
@@ -473,7 +474,6 @@
                                 </a>
                             </h4>
                         </div>
-                        {% set number = number + 1 %}
                         <div id="collapse-{{ lp_data.category.getId() }}" class="panel-collapse collapse {{ (number == 1 ? 'in':'') }}"
                              role="tabpanel" aria-labelledby="heading-{{ lp_data.category.getId() }}">
                             <div class="panel-body">