Accordion

1'use client';
2
3import { Accordion } from '@/components/ui/accordion';
4
5export function Default() {
6  return (
7    <Accordion type="single" className="w-full" defaultValue="item-1">
8      <Accordion.Item value="item-1">
9        <Accordion.Trigger value="item-1">Life Hacks for Coders</Accordion.Trigger>
10        <Accordion.Content value="item-1" className="flex flex-col gap-4 text-balance">
11          <p>
12            Want to survive 12-hour coding sessions? Always keep snacks nearby and caffeine on
13            standby. Bonus points for comfy socks and a chair that doesn't destroy your back.
14          </p>
15          <p>
16            Remember: comments are your friend. Future you will thank past you for writing clear
17            notes.
18          </p>
19        </Accordion.Content>
20      </Accordion.Item>
21      <Accordion.Item value="item-2">
22        <Accordion.Trigger value="item-2">Debugging Secrets</Accordion.Trigger>
23        <Accordion.Content value="item-2" className="flex flex-col gap-4 text-balance">
24          <p>
25            Debugging is basically detective work, but your suspects are lines of code. Breakpoints
26            are your magnifying glass.
27          </p>
28          <p>
29            Pro tip: if it compiles but doesn't work, stare at the screen, whisper "why won't you
30            work?," then Google like your life depends on it.
31          </p>
32        </Accordion.Content>
33      </Accordion.Item>
34      <Accordion.Item value="item-3">
35        <Accordion.Trigger value="item-3">Random Productivity Tips</Accordion.Trigger>
36        <Accordion.Content value="item-3" className="flex flex-col gap-4 text-balance">
37          <p>
38            Sometimes the best way to get code done is to step away. Take a walk, pet your cat, or
39            pretend to meditate.
40          </p>
41          <p>And remember: Ctrl+S is life. Save often, panic never.</p>
42        </Accordion.Content>
43      </Accordion.Item>
44    </Accordion>
45  );
46}

1'use client';
2
3import { Accordion } from '@/components/ui/accordion';
4
5export function Default() {
6  return (
7    <Accordion type="single" className="w-full" defaultValue="item-1">
8      <Accordion.Item value="item-1">
9        <Accordion.Trigger value="item-1">Life Hacks for Coders</Accordion.Trigger>
10        <Accordion.Content value="item-1" className="flex flex-col gap-4 text-balance">
11          <p>
12            Want to survive 12-hour coding sessions? Always keep snacks nearby and caffeine on
13            standby. Bonus points for comfy socks and a chair that doesn't destroy your back.
14          </p>
15          <p>
16            Remember: comments are your friend. Future you will thank past you for writing clear
17            notes.
18          </p>
19        </Accordion.Content>
20      </Accordion.Item>
21      <Accordion.Item value="item-2">
22        <Accordion.Trigger value="item-2">Debugging Secrets</Accordion.Trigger>
23        <Accordion.Content value="item-2" className="flex flex-col gap-4 text-balance">
24          <p>
25            Debugging is basically detective work, but your suspects are lines of code. Breakpoints
26            are your magnifying glass.
27          </p>
28          <p>
29            Pro tip: if it compiles but doesn't work, stare at the screen, whisper "why won't you
30            work?," then Google like your life depends on it.
31          </p>
32        </Accordion.Content>
33      </Accordion.Item>
34      <Accordion.Item value="item-3">
35        <Accordion.Trigger value="item-3">Random Productivity Tips</Accordion.Trigger>
36        <Accordion.Content value="item-3" className="flex flex-col gap-4 text-balance">
37          <p>
38            Sometimes the best way to get code done is to step away. Take a walk, pet your cat, or
39            pretend to meditate.
40          </p>
41          <p>And remember: Ctrl+S is life. Save often, panic never.</p>
42        </Accordion.Content>
43      </Accordion.Item>
44    </Accordion>
45  );
46}

1'use client';
2
3import { Accordion } from '@/components/ui/accordion';
4
5export function Multiple() {
6  return (
7    <Accordion type="multiple" className="w-full">
8      <Accordion.Item value="item-1">
9        <Accordion.Trigger value="item-1">Can I open multiple items?</Accordion.Trigger>
10        <Accordion.Content value="item-1">
11          Yes! When using type="multiple", you can have multiple accordion items open at the same
12          time.
13        </Accordion.Content>
14      </Accordion.Item>
15      <Accordion.Item value="item-2">
16        <Accordion.Trigger value="item-2">How does it work?</Accordion.Trigger>
17        <Accordion.Content value="item-2">
18          Simply set the type prop to "multiple" and users can expand as many sections as they want
19          simultaneously.
20        </Accordion.Content>
21      </Accordion.Item>
22      <Accordion.Item value="item-3">
23        <Accordion.Trigger value="item-3">Is this useful?</Accordion.Trigger>
24        <Accordion.Content value="item-3">
25          Absolutely! It's perfect for FAQ sections where users might want to compare multiple
26          answers at once.
27        </Accordion.Content>
28      </Accordion.Item>
29    </Accordion>
30  );
31}

1'use client';
2
3import { Accordion } from '@/components/ui/accordion';
4
5export function Collapsed() {
6  return (
7    <Accordion type="single" className="w-full">
8      <Accordion.Item value="item-1">
9        <Accordion.Trigger value="item-1">Will it start closed?</Accordion.Trigger>
10        <Accordion.Content value="item-1">
11          Yes! When you don't provide a defaultValue prop, all items start in a collapsed state.
12        </Accordion.Content>
13      </Accordion.Item>
14      <Accordion.Item value="item-2">
15        <Accordion.Trigger value="item-2">Can users still open items?</Accordion.Trigger>
16        <Accordion.Content value="item-2">
17          Of course! Users can click any trigger to expand the content. It just starts fully
18          collapsed.
19        </Accordion.Content>
20      </Accordion.Item>
21      <Accordion.Item value="item-3">
22        <Accordion.Trigger value="item-3">When is this useful?</Accordion.Trigger>
23        <Accordion.Content value="item-3">
24          This is great when you want users to actively choose what information they want to see,
25          keeping the interface clean initially.
26        </Accordion.Content>
27      </Accordion.Item>
28    </Accordion>
29  );
30}