[SOLVED] Shadcn Accordion Open/close by default in mobile/desktop

Shadcn Accordion Open/close by default in mobile/desktop

I want my accordion to be open by default in desktop but in mobile devices it should be initially closed. how can i implement that?

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

im using tailwind in my next.js app soo ifthis can be done by tailwind that would be superb

Solution

<Accordion type="single" collapsible defaultValue={window.screen.width >= 768 ? "item" : ""}>
  <AccordionItem value="item" >
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>