Simplify History functionality collapse / expand

html/index.html

@@ -214,7 +214,7 @@
             </table>
           </div>
           <button id="show_trace" type="button" class="greyButton">History</button>
-          <div id="history_collapse" class="collapse">
+          <div id="history_collapse" class="infoBlockSection" style="display: none">
             <div class="infoRowSpacer">
             </div>
             <div class="identSmall" id="trace_date">

html/script.js

@@ -636,20 +636,6 @@ function initialize() {
         buttonActive('#P', noVanish);
     }
 
-    let coll = document.getElementsByClassName("collapseButton");
-
-    for (let i = 0; i < coll.length; i++) {
-        coll[i].addEventListener("click", function() {
-            this.classList.toggle("active");
-            let content = this.nextElementSibling;
-            if (content.style.display === "block") {
-                content.style.display = "none";
-            } else {
-                content.style.display = "block";
-            }
-        });
-    }
-
     $('#tabs').tabs({
         active: localStorage['active_tab'],
         activate: function (event, ui) {
@@ -4020,8 +4006,6 @@ function toggleShowTrace() {
         showTraceWasIsolation = onlySelected;
         toggleIsolation("on", null);
         shiftTrace();
-        $('#history_collapse')[0].style.display = "block";
-        $('#show_trace').addClass("active");
     } else {
         showTrace = false;
         legSel = -1;
@@ -4032,13 +4016,18 @@ function toggleShowTrace() {
         //window.history.replaceState("object or string", "Title", string);
         //shareLink = string;
         updateAddressBar();
-        $('#history_collapse')[0].style.display = "none";
-        $('#show_trace').removeClass("active");
         const hex = SelectedPlane.icao;
         SelectedPlane = null;
         showTraceExit = true;
         selectPlaneByHex(hex, {follow: true, zoom: ZoomLvl,});
     }
+
+    $('#history_collapse').toggle({
+        duration: 0,
+        complete: function () {
+            $('#show_trace').toggleClass('active');
+        }
+    });
 }
 
 function legShift(offset) {

html/style.css

@@ -724,46 +724,7 @@ table.infoTable tr td {
     float: right;
     margin-left: calc( 5px * var(--SCALE));
 }
-
-/* Style the button that is used to open and close the collapsible content */
-.collapseButton {
-    background-color: #ddd;
-    cursor: pointer;
-    padding: calc( 4px * var(--SCALE));
-    width: 100%;
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: calc( 15px * var(--SCALE));
-    font-weight: bold;
-    color: #003f4b;
-}
-
-/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-.active, .collapseButton:hover {
-    background-color: #ccc;
-}
-
-/* Style the collapsible content. Note: hidden by default */
-.collapse {
-    padding: 0 calc( 14px * var(--SCALE));
-    display: none;
-    overflow: hidden;
-    background-color: #f1f1f1;
-    margin-bottom: calc( 8px * var(--SCALE));
-}
-
-.collapseSettings {
-    padding: 0;
-}
-
-.collapseButton:after {
-    content: '\02795\FE0E'; /* Unicode character for "plus" sign (+) */
-    float: right;
-    margin-left: calc( 5px * var(--SCALE));
-}
-
-.active:after {
+.greyButton.active:after {
     content: "\2796\FE0E"; /* Unicode character for "minus" sign (-) */
 }