x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="max-w-md"> <div class="w-full" data-controller="ui--accordion" data-ui--accordion-type-value="multiple" data-ui--accordion-values-value="["item-1","item-3"]" id="ui-accordion-2985b193"> <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-1" data-state="closed"> <h3 class="contents"><button id="ui-accordion-trigger-20faf311" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-efe5d0f3de9c" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i> Features</button></h3> <div id="ui-accordion-content-0625748b" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-efe5d0f3de9c" data-ui--accordion-target="content" data-state="closed"> <div class="overflow-hidden min-h-0"> <div class="pl-8 pb-4 text-sm"> <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1"> <li>Projects and tasks</li> <li>Time tracking</li> <li>Grade reporting</li> <li>Client portal</li> </ul> </div> </div> </div> </div> <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-2" data-state="closed"> <h3 class="contents"><button id="ui-accordion-trigger-5983ab0e" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-b0e407c8301b" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i> Pricing</button></h3> <div id="ui-accordion-content-bb237920" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-b0e407c8301b" data-ui--accordion-target="content" data-state="closed"> <div class="overflow-hidden min-h-0"> <div class="pl-8 pb-4 text-sm"> <p class="text-sm text-muted-foreground">We offer flexible pricing plans for teams of all sizes. Contact our sales team for a custom quote.</p> </div> </div> </div> </div> <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-3" data-state="closed"> <h3 class="contents"><button id="ui-accordion-trigger-153d9103" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-6bd0bb41c605" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i> Support</button></h3> <div id="ui-accordion-content-30b15121" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-6bd0bb41c605" data-ui--accordion-target="content" data-state="closed"> <div class="overflow-hidden min-h-0"> <div class="pl-8 pb-4 text-sm"> <p class="text-sm text-muted-foreground">24/7 support via email and chat. Premium plans include dedicated account managers and phone support.</p> </div> </div> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="max-w-md"> <%= render(UI::Accordion.new(type: :multiple, default_value: ["item-1", "item-3"])) do |accordion| %> <% accordion.with_item(value: "item-1") do |item| %> <% item.with_trigger { "Features" } %> <% item.with_content do %> <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1"> <li>Projects and tasks</li> <li>Time tracking</li> <li>Grade reporting</li> <li>Client portal</li> </ul> <% end %> <% end %> <% accordion.with_item(value: "item-2") do |item| %> <% item.with_trigger { "Pricing" } %> <% item.with_content do %> <p class="text-sm text-muted-foreground">We offer flexible pricing plans for teams of all sizes. Contact our sales team for a custom quote.</p> <% end %> <% end %> <% accordion.with_item(value: "item-3") do |item| %> <% item.with_trigger { "Support" } %> <% item.with_content do %> <p class="text-sm text-muted-foreground">24/7 support via email and chat. Premium plans include dedicated account managers and phone support.</p> <% end %> <% end %> <% end %></div>No notes provided.
No params configured.