diff --git a/src/components/schema/SchemaListingGroup.svelte b/src/components/schema/SchemaListingGroup.svelte
index 8f724fd152..3359cca6cb 100644
--- a/src/components/schema/SchemaListingGroup.svelte
+++ b/src/components/schema/SchemaListingGroup.svelte
@@ -24,9 +24,15 @@
     });
 </script>
 
-<div class="card my-2" class:collapse={hidden} class:show={$showHidden}>
-    <div class="card-header position-sticky bg-body-secondary">
-        <h2 class="card-title text-success scroll-target my-1" id={id.replaceAll('_', '-')}>
+<div class="accordion my-2">
+    <div class="accordion-item">
+        <h2
+            class="accordion-button bg-body-secondary scroll-target"
+            data-bs-toggle="collapse"
+            data-bs-target={'#' + id.replaceAll('_', '-') + '_body'}
+            aria-controls={'#' + id.replaceAll('_', '-') + '_body'}
+            id={id.replaceAll('_', '-')}
+        >
             <a
                 class="text-decoration-none text-success"
                 aria-hidden="true"
@@ -38,16 +44,18 @@
                 {definition.title}
             </a>
         </h2>
-    </div>
-    <div class="card-body pb-0">
-        <p class="mb-0">{definition.description ? definition.description : ''}</p>
-        {#if definition.properties}
-            <div class="properties">
-                {#each Object.entries(definition.properties) as [title, property] (title)}
-                    <SchemaListingElement {title} {property} />
-                {/each}
+        <div id={id.replaceAll('_', '-') + '_body'} class="accordion-collapse collapse show">
+            <div class="accordion-body">
+                <p class="mb-0">{definition.description ? definition.description : ''}</p>
+                {#if definition.properties}
+                    <div class="properties">
+                        {#each Object.entries(definition.properties) as [title, property] (title)}
+                            <SchemaListingElement {title} {property} />
+                        {/each}
+                    </div>
+                {/if}
             </div>
-        {/if}
+        </div>
     </div>
 </div>
 
@@ -55,4 +63,11 @@
     .properties > :global(.row) {
         margin-top: -1px; // avoid doubled borders
     }
+    .accordion-button {
+        font-size: 2rem;
+        font-weight: 500;
+    }
+    .accordion-button.collapsed {
+        background: #eaecef;
+    }
 </style>