diff --git a/apps/docs/components/Reference/ReferenceDetailCollapse.tsx b/apps/docs/components/Reference/ReferenceDetailCollapse.tsx
new file mode 100644
index 00000000000..ccb8f236671
--- /dev/null
+++ b/apps/docs/components/Reference/ReferenceDetailCollapse.tsx
@@ -0,0 +1,44 @@
+import * as Accordion from '@radix-ui/react-accordion'
+import React from 'react'
+import { IconChevronRight } from '~/../../packages/ui'
+
+const ReferenceDetailCollapse: React.FC<{ id: string; label: string; defaultOpen?: boolean }> = ({
+  defaultOpen = true,
+  ...props
+}) => {
+  return (
+    <Accordion.Root
+      className="AccordionRoot"
+      type="single"
+      defaultValue={defaultOpen ? `${props.id}` : ''}
+      collapsible
+    >
+      <Accordion.Item className="AccordionItem" value={`${props.id}`}>
+        <Accordion.Trigger asChild>
+          <button
+            className={[
+              'transition-all ease-out',
+              'h-8',
+              'bg-scale-200 data-open:bg-scale-300',
+              'dark:bg-scale-300 dark:data-open:bg-scale-500',
+              'border border-scale-500 w-full flex items-center gap-3 px-5',
+              'rounded-tl rounded-tr',
+              'data-closed:rounded-bl data-closed:rounded-br',
+              'text-scale-1100 text-xs',
+            ].join(' ')}
+          >
+            <div className="data-open-parent:rotate-90 text-scale-900">
+              <IconChevronRight size={12} strokeWidth={2} />
+            </div>
+            {props.label}
+          </button>
+        </Accordion.Trigger>
+        <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up">
+          {props.children}
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  )
+}
+
+export default ReferenceDetailCollapse
diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx
index a938acc74a6..4d8c9515626 100644
--- a/apps/docs/pages/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/[...slug].tsx
@@ -32,6 +32,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import OldLayout from '~/layouts/Default'
 
 import * as Accordion from '@radix-ui/react-accordion'
+import ReferenceDetailCollapse from '~/components/Reference/ReferenceDetailCollapse'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -90,6 +91,7 @@ export default function JSReference(props) {
 
           // const introFileMarkdownContent =
           console.log('props.docs', props.docs)
+
           // if (item.id !== 'db-modifiers-select') return <></>
 
           return (
@@ -194,33 +196,13 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                                 label={example.name}
                                 className="flex flex-col gap-3"
                               >
-                                <Accordion.Root
-                                  className="AccordionRoot"
-                                  type="single"
-                                  defaultValue={`${example.id}-data`}
-                                  collapsible
-                                >
-                                  <Accordion.Item value={`${example.id}-data`}>
-                                    <Accordion.Trigger asChild>
-                                      <button
-                                        className={[
-                                          'transition-all ease-out',
-                                          'h-8',
-                                          'bg-scale-300 data-open:bg-scale-500',
-                                          'border border-scale-500 w-full flex items-center gap-3 px-5',
-                                          'data-open:bg-yellow-900',
-                                          'rounded-tl rounded-tr',
-                                          'data-closed:rounded-bl data-closed:rounded-br',
-                                          'text-scale-1100 text-xs',
-                                        ].join(' ')}
-                                      >
-                                        <div className="data-open-parent:rotate-90 text-scale-900">
-                                          <IconChevronRight size={12} strokeWidth={2} />
-                                        </div>
-                                        Example data source
-                                      </button>
-                                    </Accordion.Trigger>
-                                    <Accordion.Content>
+                                {((tables && tables.length > 0) || sql) && (
+                                  <ReferenceDetailCollapse
+                                    id={`${example.id}-${exampleIndex}-data`}
+                                    label="Example data source"
+                                    defaultOpen={false}
+                                  >
+                                    <>
                                       {tables &&
                                         tables.length > 0 &&
                                         tables.map((table) => {
@@ -241,16 +223,17 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                                         })}
                                       {sql && (
                                         <CodeBlock
-                                          className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
+                                          className="useless-code-block-class my-0 border border-t-0 border-scale-500 !rounded-tl-none !rounded-tr-none"
                                           language="sql"
                                           hideLineNumbers={true}
                                         >
                                           {sql}
                                         </CodeBlock>
                                       )}
-                                    </Accordion.Content>
-                                  </Accordion.Item>
-                                </Accordion.Root>
+                                    </>
+                                  </ReferenceDetailCollapse>
+                                )}
+
                                 <CodeBlock
                                   className="useless-code-block-class"
                                   language="js"
@@ -264,18 +247,22 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
                                         .replace('```', ''))}
                                 </CodeBlock>
                                 {response && (
-                                  <CodeBlock
-                                    className="useless-code-block-class"
-                                    language="js"
-                                    hideLineNumbers={true}
+                                  <ReferenceDetailCollapse
+                                    id={`${example.id}-${exampleIndex}-response`}
+                                    label="Example response"
+                                    defaultOpen={false}
                                   >
-                                    {exampleString +
-                                      (example.code &&
-                                        example.code
-                                          .replace('```', '')
-                                          .replace('js', '')
-                                          .replace('```', ''))}
-                                  </CodeBlock>
+                                    <CodeBlock
+                                      className="useless-code-block-class"
+                                      language="js"
+                                      hideLineNumbers={true}
+                                    >
+                                      {response
+                                        .replace('```', '')
+                                        .replace('json', '')
+                                        .replace('```', '')}
+                                    </CodeBlock>
+                                  </ReferenceDetailCollapse>
                                 )}
                               </Tabs.Panel>
                             )