webui: Support toggle the body/contents of sections

The section header has class "heading" and a toggle control with class
"toggle", which will toggle the display of the next block with the
"body" class.

2 files changed, 38 insertions, 3 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index a0d7e1b..510b342 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -79,6 +79,24 @@ header.masthead {
 
 
 /**
+ * Section headings
+ */
+.heading > .icon {
+    margin-right: 0.2rem;
+}
+.heading > .toggle {
+    opacity: 0.2;
+    color: #606c76;
+    font-size: 65%;
+    vertical-align: middle;
+    margin-left: 1rem;
+    cursor: pointer;
+}
+.heading > .toggle:hover {
+    opacity: 0.9;
+}
+
+/**
  * Navigation
  */
 .navigation {
@@ -378,13 +396,13 @@ button,
     margin-right: 0.2rem;
 }
 .panel-title > .toggle {
-    margin-left: 0.5rem;
-    opacity: 0.5;
+    opacity: 0.2;
     vertical-align: middle;
+    margin-left: 0.5rem;
     cursor: pointer;
 }
 .panel-title > .toggle:hover {
-    opacity: 1.0;
+    opacity: 0.9;
 }
 .panel-control {
     float: right;
diff --git a/fg21sim/webui/static/js/main.js b/fg21sim/webui/static/js/main.js
index 7f5b582..6db99e0 100644
--- a/fg21sim/webui/static/js/main.js
+++ b/fg21sim/webui/static/js/main.js
@@ -83,6 +83,23 @@ $(document).ready(function () {
     scrollTarget(nav_height);
   });
 
+  // Toggle section contents/body
+  $(".heading > .toggle").on("click", function () {
+    var toggle = $(this);
+    var body = toggle.closest(".heading").next(".body");
+    if (body.is(":visible")) {
+      body.slideUp("fast");
+      toggle.removeClass("fa-chevron-circle-up")
+        .addClass("fa-chevron-circle-down")
+        .attr("title", "Expand contents");
+    } else {
+      body.slideDown("fast");
+      toggle.removeClass("fa-chevron-circle-down")
+        .addClass("fa-chevron-circle-up")
+        .attr("title", "Collapse contents");
+    }
+  });
+
   // Panel toggle control
   $(".panel-title > .toggle").on("click", function () {
     var toggle = $(this);