Animation when opening sub-sections

display/display.css

@@ -310,10 +310,11 @@
 .neighbor-content-links {
     padding: 5px;
     display: none;
-    overflow: hidden;
     background-color: #ffffff;
     flex-direction: column;
-    overflow-x: auto;
+    height: 0;
+    transition: height 0.25s ease-out;
+    overflow: hidden;
 }
 
 .link-neighbor {

display/overlays/neighbors.js

@@ -64,7 +64,8 @@ class NodeNeighborOverlay {
             }
         });
 
-
+        const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;
+        const slideUp = elem => elem.style.height = '0';
 
         const colors =
             this.type === "link"
@@ -105,11 +106,13 @@ class NodeNeighborOverlay {
             this.tabContentPages[cls] = collTabContent;
             collTab.addEventListener("click", function() {
                 if(collTabContent.style.display === "flex") {
+                    slideUp(collTabContent);
                     collTabContent.style.display = "none";
                     openMarkerTabs.innerText = '+';
                 } else {
                     collTabContent.style.display = "flex";
                     openMarkerTabs.innerText = '-';
+                    slideDown(collTabContent);
                 }
             });
         }