Merge pull request #803 from thejackshelton/accordion-multiple

feat: multiple accordion items can be opened on page load in multiple…

Author: thejackshelton

.changeset/wicked-zoos-beg.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+feat: accordion items can now open without a value using the `open` prop. use only in multiple mode.

apps/website/src/routes/docs/headless/accordion/index.mdx

@@ -267,5 +267,10 @@ You have custom control over how to render items in the Accordion, allowing for
       type: 'boolean',
       description: 'When true, the accordion item is disabled.',
     },
+    {
+      name: 'open',
+      type: 'boolean',
+      description: 'Opens the accordion item in multiple mode.',
+    },
   ]}
 />

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -23,7 +23,13 @@ type AccordionItemProps = PropsOf<typeof HCollapsible> & {
 };
 
 export const HAccordionItem = component$(
-  ({ id, _index, value, ...props }: AccordionItemProps & InternalAccordionItemProps) => {
+  ({
+    id,
+    _index,
+    value,
+    open,
+    ...props
+  }: AccordionItemProps & InternalAccordionItemProps) => {
     const context = useContext(accordionContextId);
     const localId = useId();
     const itemId = id ?? localId + '-item';
@@ -100,7 +106,8 @@ export const HAccordionItem = component$(
     return (
       <HCollapsible
         triggerRef={triggerRef}
-        bind:open={isOpenSig}
+        bind:open={open ? undefined : isOpenSig}
+        open={context.isMultipleSig.value ? open : undefined}
         id={itemId}
         disabled={context.disabled || props.disabled}
         collapsible={context.collapsible}