XWIKI-21766: Notification preferences dropdown carets are not animated (#3300)

* Reworked the way hiding sections work to make it easier to handle with CSS (and also avoid inline styling...)
* Added style for the rotation
* Used mvn xar:format to escape properly the new content added in the .xml

(cherry picked from commit b952bda1)

xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsApplicationsPreferencesMacro.xml

@@ -349,8 +349,6 @@
      * Initialization
      */
     self.init = function () {
-      // Replace the 'hidden' class by a call to jQuery.hide();
-      self.domElement.removeClass('hidden').hide();
       // Enable bootstrap switches
       $([self.switchAlert, self.switchEmail]).bootstrapSwitch({
         size: 'mini',
@@ -394,13 +392,6 @@
       self.switchEmail.bootstrapSwitch('state', state);
     };
 
-    /**
-     * Hide/Show the event type widget
-     */
-    self.toggleVisibility = function () {
-      self.domElement.toggle();
-    };
-
     // Call init
     self.init();
   };
@@ -539,9 +530,7 @@
       // Handle collapsing
       // Make sure the click listener is registered only once.
       self.collapseButton.off('click.toggleVisibility').on('click.toggleVisibility', function() {
-        for (var i = 0; i < self.eventTypes.length; ++i) {
-          self.eventTypes[i].toggleVisibility();
-        }
+        this.classList.toggle("collapsed")
       });
 
       // Handle switch change
@@ -730,6 +719,19 @@
   width: 250px;
 }
 
+/* Hide all of the eventType rows that are after a category toggler that is in the collapsed state. */
+.notifPreferences tr:has(> td > button.collapsed) ~ tr {
+  display: none;
+}
+
+.notifPreferences tr > td > button > *:first-child {
+  transition: transform .2s ease-in-out;
+}
+
+.notifPreferences tr > td > button.collapsed > *:first-child {
+  transform: rotate(90deg);
+}
+
 .notificationAppCell {
   vertical-align: top;
   width: 33%;
@@ -1050,7 +1052,7 @@
       #end
       ## Collapse button
       <td class="notificationCollapseButtonCell">
-        <button type="button" class="btn btn-default btn-sm collapseButton">
+        <button type="button" class="btn btn-default btn-sm collapseButton collapsed">
           $services.icon.renderHTML('caret-down')
           <span class='sr-only'>
             $escapetool.xml($services.localization.render('notifications.settings.applications.table.dropdown.toggle.label',[$type.applicationName]))
@@ -1062,7 +1064,7 @@
     ## Display all events of this application
     ##
     #foreach($type in $app)
-      <tr class="rowEventType hidden" data-eventtype="$type.eventType">
+      <tr class="rowEventType" data-eventtype="$type.eventType">
         <td>$escapetool.xml($type.description)</td>
         #displayPreference($type, 'alert')
         #if ($services.notification.areEmailsEnabled())