Accordion

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
 
export function AccordionDemo() {
  return (
    <Accordion>
      <AccordionItem>
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern and is fully keyboard
          navigable. The component is built with proper focus management and
          ARIA attributes for screen reader compatibility.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. The component comes with default styling using Tailwind CSS
          classes, but you can easily customize it to match your design system.
          The animation is handled through CSS transitions for smooth open/close
          interactions.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Is it responsive?</AccordionTrigger>
        <AccordionContent>
          Absolutely. The accordion adapts to different screen sizes and works
          well on both desktop and mobile devices. The content area smoothly
          expands and collapses regardless of the amount of content inside.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
 
export function AccordionDisabled() {
  return (
    <Accordion className="mx-auto w-full max-w-md" disabled>
      <AccordionItem>
        <AccordionTrigger>User-friendly?</AccordionTrigger>
        <AccordionContent>
          Yes, easy to use with clear controls.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Customizable?</AccordionTrigger>
        <AccordionContent>Yes, change it with CSS classes.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Fast?</AccordionTrigger>
        <AccordionContent>Yes, works smoothly everywhere.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
 
export function AccordionMultiple() {
  return (
    <Accordion multiple>
      <AccordionItem>
        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
        <AccordionContent>
          Yes! With the multiple prop, you can expand as many accordion items as
          you want simultaneously. Try opening all three sections at once to see
          how it works.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>How is this different from default?</AccordionTrigger>
        <AccordionContent>
          The default accordion only allows one item to be open at a time. When
          you open a new item, the previously opened one automatically closes.
          This multiple variant keeps all opened items expanded.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>When should I use this?</AccordionTrigger>
        <AccordionContent>
          Use the multiple variant when users might need to compare content
          across different sections, or when the information in each section is
          independent and doesn't require exclusive focus.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}