general: add foldable sections (#21828)

gadjo/static/css/gadjo.scss

@@ -1042,6 +1042,29 @@ div.section {
 		padding-bottom: 3px;
 		border-bottom: 1px solid #bcbcbc;
 	}
+	&.foldable {
+		> h2, > h3 {
+			cursor: pointer;
+			&::after {
+				content: "▼";
+				font-size: 80%;
+				text-align: right;
+				float: right;
+				transition: transform ease 0.1s;
+			}
+		}
+		&.folded {
+			> h2, > h3 {
+				border-bottom: none;
+				&::after {
+					transform: rotate(-90deg);
+				}
+			}
+			> div, > dl {
+				display: none;
+			}
+		}
+	}
 }
 
 @import 'grid';

gadjo/static/js/gadjo.js

@@ -324,7 +324,7 @@ var gadjo_js = gadjo_js || {};
         }
       }
     });
-    $(function () {
+    $(function () { /* foldable elements with memory */
       function gadjo_unfold_saved() {
         $('.gadjo-folded').each(function (idx, elem) {
           if (elem.id && sessionStorage['gadjo-foldable-id-' + elem.id + '-' + window.location.pathname] == "true") {
@@ -342,6 +342,11 @@ var gadjo_js = gadjo_js || {};
         }
       });
     });
+    $(function () { /* foldable sections */
+      $('.section.foldable > h2, .section.foldable > h3').on('click', function() {
+        $(this).parent().toggleClass('folded');
+      });
+    });
     $(function () {
       if ($('body').data('gadjo')) {
         if ($('#sidepage').length == 1) {