Accordion

npx shadcn@latest add https://docs.nasaqui.com/r/accordion.json

import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@fadymondy/nasaq/web";

import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@fadymondy/nasaq/web";

export function Faq() {
  return (
    <Accordion defaultValue={["plan"]}>
      <AccordionItem value="plan">
        <AccordionTrigger>Can I change my plan later?</AccordionTrigger>
        <AccordionPanel>Yes, any time from the billing page.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="pay">
        <AccordionTrigger>Which payment methods do you accept?</AccordionTrigger>
        <AccordionPanel>Mada, Visa and Mastercard.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

<Accordion>            data-slot="accordion"
└─ <AccordionItem>     data-slot="accordion-item"
   ├─ <AccordionTrigger>  data-slot="accordion-trigger" (inside accordion-header), data-panel-open when open
   └─ <AccordionPanel>    data-slot="accordion-panel"

import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@fadymondy/nasaq/web";

export function SettingsAr() {
  return (
    <Accordion multiple defaultValue={["n", "l"]}>
      <AccordionItem value="n">
        <AccordionTrigger>الإشعارات</AccordionTrigger>
        <AccordionPanel>اختر متى نراسلك.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="l">
        <AccordionTrigger>اللغة</AccordionTrigger>
        <AccordionPanel>العربية أو الإنجليزية.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}