misc: use (dis)close titles on formdata page (#34831)

static/dataview.js

@@ -1,10 +1,7 @@
 $(function() {
-  $('.dataview').before('<a href="#" id="disclose-dataview">Afficher le détail de la demande</a>');
-  $('#disclose-dataview').click(
-    function() {
-      $(this).hide();
-      $('.dataview').show();
-      $('.qommon-map').trigger('qommon:invalidate');
-      return false;
-    });
+  $('.section.foldable.folded h2').append('<span class="disclose-message">(afficher le détail de la demande)</span>');
+  $('.section.foldable h2').click(function() {
+    $(this).parent('.section').toggleClass('folded');
+    $('.qommon-map').trigger('qommon:invalidate');
+  });
 });

static/includes/_wcs.scss

@@ -284,10 +284,6 @@ div#receipt-intro {
 	display: block;
 }
 
-div.dataview {
-	display: none;
-}
-
 div.qommon-map {
 	height: 280px;
 }
@@ -719,3 +715,42 @@ div.file-upload-widget {
 p.use-file-from-fargo {
 	margin-top: 0;
 }
+
+div.section.foldable {
+	margin-bottom: 1rem;
+	> h2:first-child {
+		&::after {
+			font-family: FontAwesome;
+			content: "\f106";  // angle-up
+			position: absolute;
+			right: 1em;
+		}
+		cursor: pointer;
+		&:focus span.disclose-message,
+		&:hover span.disclose-message {
+			text-decoration: underline;
+		}
+	}
+	span.disclose-message {
+		padding-left: 1ex;
+		font-size: 1rem;
+		display: none;
+	}
+	&.folded {
+		span.disclose-message {
+			display: inline-block;
+			@media screen and (max-width: $mobile-limit) {
+				// never displayed on mobile as the small width
+				// makes clear the relation between title and
+				// open/close bracket.
+				display: none;
+			}
+		}
+		div {
+			display: none;
+		}
+		> h2:first-child::after {
+			content: "\f107";  // angle-down
+		}
+	}
+}