diff --git a/display/display.css b/display/display.css index 1d8819c7b67dfa0cdafe6253b50f9858d0b6203f..54b26f44966e15970938889a672080556fe53165 100644 --- a/display/display.css +++ b/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 { diff --git a/display/overlays/neighbors.js b/display/overlays/neighbors.js index 51f49c2f85ce319ca52593418905a3ec8f01b8c1..d1a042cbc463ef6ca11717a47b699f5d370d4591 100644 --- a/display/overlays/neighbors.js +++ b/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); } }); }