notification list: use bootstrap accordion to fold/unfold notification content

src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss

@@ -66,3 +66,15 @@ div.notification-show {
         }
     }
 }
+
+// Override bootstrap accordion
+div#notification-fold {
+    .accordion-button {
+        padding: 0;
+        background-color: unset;
+        &:not(.collapsed) {
+            background-color: unset;
+            box-shadow: unset;
+        }
+    }
+}

src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig

@@ -1,4 +1,15 @@
 <div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
+
+    {% if fold_item is defined and fold_item != 'false' %}
+    <div class="accordion-header" id="flush-heading-{{ notification.id }}">
+        <button class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#flush-collapse-{{ notification.id }}"
+            aria-expanded="false"
+            aria-controls="flush-collapse-{{ notification.id }}">
+    {% endif %}
+
             <div class="item-row title">
                 <h2 class="notification-title">
                     <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
@@ -6,8 +17,12 @@
                     </a>
                 </h2>
             </div>
-    <div class="item-row mt-2 notification-header">
 
+        {% if fold_item is defined and fold_item != 'false' %}
+        </button>
+        {% endif %}
+
+        <div class="item-row notification-header mt-2">
             <div class="item-col">
                 <ul class="small_in_title">
                     {% if step is not defined or step == 'inbox' %}
@@ -42,12 +57,19 @@
                     {% endif %}
                 </ul>
             </div>
-
             <div class="item-col">
                 {{ notification.date|format_datetime('long', 'short') }}
             </div>
-
         </div>
+
+    {% if fold_item is defined and fold_item != 'false' %}
+    </div>
+    <div id="flush-collapse-{{ notification.id }}"
+        class="accordion-collapse collapse"
+        aria-labelledby="flush-heading-{{ notification.id }}"
+        data-bs-parent="#notification-fold">
+    {% endif %}
+
         <div class="item-row separator">
             <div class="mx-3 flex-grow-1">
                 {% include data.template with data.template_data %}
@@ -88,4 +110,9 @@
                 </ul>
             </div>
         {% endif %}
+
+    {% if fold_item is defined and fold_item != 'false' %}
+    </div>
+    {% endif %}
+
 </div>

src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig

@@ -46,10 +46,12 @@
             <p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
         {% endif %}
     {% else %}
-        <div class="flex-table">
+        <div class="flex-table accordion accordion-flush" id="notification-fold">
             {% for data in datas %}
                 {% set notification = data.notification %}
-                {% include 'ChillMainBundle:Notification:_list_item.html.twig' %}
+                {% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
+                    'fold_item': 'true'
+                } %}
             {% endfor %}
         </div>
     {% endif %}