Accordion

1import React from 'react'
2
3import {
4    Accordion,
5    AccordionContent,
6    AccordionItem,
7    AccordionTrigger,
8} from '@/components/ui/accordion'
9
10export function AccordionDemo() {
11    return (
12        <Accordion
13            type="single"
14            defaultValue="item-1"
15            collapsible
16            className="w-full max-w-96 space-y-2.5 lg:space-y-5"
17        >
18            <AccordionItem value="item-1">
19                <AccordionTrigger>
20                    Do you offer customer support?
21                </AccordionTrigger>
22                <AccordionContent>
23                    Yes, we provide 24/7 customer support via email and live
24                    chat. Our team is always ready to help you.
25                </AccordionContent>
26            </AccordionItem>
27            <AccordionItem value="item-2">
28                <AccordionTrigger>
29                    Is there a free trial available?
30                </AccordionTrigger>
31                <AccordionContent>
32                    Yes, you can try our service free for 14 days with no credit
33                    card required.
34                </AccordionContent>
35            </AccordionItem>
36            <AccordionItem value="item-3">
37                <AccordionTrigger>What is your refund policy?</AccordionTrigger>
38                <AccordionContent>
39                    We offer a 30-day money-back guarantee. If you’re not
40                    satisfied with your purchase, contact us and we’ll issue a
41                    full refund.
42                </AccordionContent>
43            </AccordionItem>
44        </Accordion>
45    )
46}
47

1import React from 'react'
2
3import {
4    Accordion,
5    AccordionContent,
6    AccordionItem,
7    AccordionTrigger,
8} from '@/components/ui/accordion'
9
10export function AccordionIconPosition() {
11    return (
12        <Accordion
13            type="single"
14            defaultValue="item-1"
15            collapsible
16            className="w-full max-w-96 space-y-2.5 lg:space-y-5"
17        >
18            <AccordionItem value="item-1">
19                <AccordionTrigger iconPosition="left">
20                    Do you offer customer support?
21                </AccordionTrigger>
22                <AccordionContent>
23                    Yes, we provide 24/7 customer support via email and live
24                    chat. Our team is always ready to help you.
25                </AccordionContent>
26            </AccordionItem>
27            <AccordionItem value="item-2">
28                <AccordionTrigger iconPosition="left">
29                    Is there a free trial available?
30                </AccordionTrigger>
31                <AccordionContent>
32                    Yes, you can try our service free for 14 days with no credit
33                    card required.
34                </AccordionContent>
35            </AccordionItem>
36            <AccordionItem value="item-3">
37                <AccordionTrigger iconPosition="left">
38                    What is your refund policy?
39                </AccordionTrigger>
40                <AccordionContent>
41                    We offer a 30-day money-back guarantee. If you’re not
42                    satisfied with your purchase, contact us and we’ll issue a
43                    full refund.
44                </AccordionContent>
45            </AccordionItem>
46        </Accordion>
47    )
48}
49

1import React from 'react'
2import { Plus } from 'lucide-react'
3
4import {
5    Accordion,
6    AccordionContent,
7    AccordionItem,
8    AccordionTrigger,
9} from '@/components/ui/accordion'
10
11export function AccordionIconStyle() {
12    return (
13        <Accordion
14            type="single"
15            defaultValue="item-1"
16            collapsible
17            className="w-full max-w-96 space-y-2.5 lg:space-y-5"
18        >
19            <AccordionItem value="item-1">
20                <AccordionTrigger
21                    icon={
22                        <Plus className="text-gray size-[18px] shrink-0 transition-transform duration-200 group-data-[state=open]:[&_path:nth-of-type(2)]:hidden" />
23                    }
24                >
25                    Do you offer customer support?
26                </AccordionTrigger>
27                <AccordionContent>
28                    Yes, we provide 24/7 customer support via email and live
29                    chat. Our team is always ready to help you.
30                </AccordionContent>
31            </AccordionItem>
32            <AccordionItem value="item-2">
33                <AccordionTrigger
34                    icon={
35                        <Plus className="text-gray size-[18px] shrink-0 transition-transform duration-200 group-data-[state=open]:[&_path:nth-of-type(2)]:hidden" />
36                    }
37                >
38                    Is there a free trial available?
39                </AccordionTrigger>
40                <AccordionContent>
41                    Yes, you can try our service free for 14 days with no credit
42                    card required.
43                </AccordionContent>
44            </AccordionItem>
45            <AccordionItem value="item-3">
46                <AccordionTrigger
47                    icon={
48                        <Plus className="text-gray size-[18px] shrink-0 transition-transform duration-200 group-data-[state=open]:[&_path:nth-of-type(2)]:hidden" />
49                    }
50                >
51                    What is your refund policy?
52                </AccordionTrigger>
53                <AccordionContent>
54                    We offer a 30-day money-back guarantee. If you’re not
55                    satisfied with your purchase, contact us and we’ll issue a
56                    full refund.
57                </AccordionContent>
58            </AccordionItem>
59        </Accordion>
60    )
61}
62