Nested

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7 
8export function Accordion11() {
9  return (
10    <Accordion defaultValue={['account']} className="w-full max-w-md">
11      <AccordionItem value="account">
12        <AccordionTrigger>Account</AccordionTrigger>
13        <AccordionContent>
14          <p className="text-muted-foreground">
15            Manage your profile and security in the grouped sections below.
16          </p>
17          <div className="bg-muted/40 mt-3 rounded-lg border px-3">
18            <Accordion defaultValue={['profile']}>
19              <AccordionItem value="profile">
20                <AccordionTrigger className="text-foreground py-3">
21                  Profile
22                </AccordionTrigger>
23                <AccordionContent className="text-muted-foreground h-auto">
24                  Update your name, avatar, and the email tied to your account.
25                </AccordionContent>
26              </AccordionItem>
27              <AccordionItem value="security" className="border-b-0">
28                <AccordionTrigger className="text-foreground py-3">
29                  Security
30                </AccordionTrigger>
31                <AccordionContent className="text-muted-foreground h-auto">
32                  Enable two-factor authentication and review active sessions.
33                </AccordionContent>
34              </AccordionItem>
35            </Accordion>
36          </div>
37        </AccordionContent>
38      </AccordionItem>
39      <AccordionItem value="workspace">
40        <AccordionTrigger>Workspace</AccordionTrigger>
41        <AccordionContent className="text-muted-foreground">
42          Members, roles, and billing settings for the whole team.
43        </AccordionContent>
44      </AccordionItem>
45    </Accordion>
46  )
47}