Improved behavior of stacked collapsibles.

src/display/components/collapsible.css

 .collapsible-content {
     overflow: hidden;
-    transition: height 0.2s ease-in-out;
     border-bottom: 1px solid #dee2e6 !important;
 }
 
+.collapsible-transition-height {
+    transition: height 0.2s ease-in-out;
+}
+
 .collapsible-content-padding > ul {
     margin: 0 0 0 2em;
 }
@@ -12,19 +15,6 @@
     padding: 10px 0 10px 10px;
 }
 
-.collapsible-rotate-center {
-    -moz-transition: all 0.2s linear;
-    -webkit-transition: all 0.2s linear;
-    font-size: 4em;
-    transition: all 0.2s linear;
-}
-.collapsible-rotate-center.down {
-    transform: rotate(-90deg);
-}
-.collapsible-rotate-center.up {
-    transform: rotate(90deg);
-}
-
 .collapsible-button {
     position: relative;
     display: flex;

src/display/components/collapsible.tsx

@@ -6,14 +6,16 @@ interface CollapsibleProps {
     header: string | React.ReactNode;
     children?: React.ReactNode | React.ReactNode[];
     color?: string;
+    heightTransition?: boolean;
 }
 
-// Implementation details at https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208
+// Implementation details partially from https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208
 function Collapsible({
     open,
     header,
     children,
     color = "gray",
+    heightTransition = true,
 }: CollapsibleProps) {
     const [isOpen, setIsOpen] = useState(open);
     const [height, setHeight] = useState<number | undefined>(
@@ -59,7 +61,7 @@ function Collapsible({
                         {header}
                     </button>
                 </div>
-                <div className={"collapsible-content"} style={{ height }}>
+                <div className={`collapsible-content ${heightTransition ? "collapsible-transition-height" : ""}`} style={{ height }}>
                     <div ref={ref}>
                         <div className={"collapsible-content-padding"}>
                             {children}

src/display/components/nodeinfo/neighbors.tsx

@@ -25,7 +25,7 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
             <FancyScrollbar>
                 <Collapsible header={"Verwandte Inhalte"}>
                     {classes.map((cls) => (
-                        <Collapsible header={cls} key={cls}>
+                        <Collapsible header={cls} key={cls} heightTransition={false}>
                             <ul>
                                 {categories.get(cls).map((node) => (
                                     <li key={node.name}>{node.name}</li>