UI Components

Default Accordion

Use the accordion component to show hidden information based on the collapse and expand state using Alpine JS.

Require Alpine JS
1 <section x-data="{
2 accordionOne: false,
3 accordionTwo: false,
4 accordionThree: false,
5}"
6 class="p-2 bg-white dark:bg-slate-800 dark:text-slate-200">
7 <div class="container mx-auto">
8 <div class="-mx-4 flex">
9 <div class="w-full px-4">
10 <div class="single-faq mb-2 w-full rounded-lg border border-slate-300 dark:border-slate-600 p-2">
11 <button class="faq-btn flex w-full text-left" @click="accordionOne = !accordionOne">
12 <div
13 class="mr-5 flex h-10 w-full max-w-[40px] items-center justify-center rounded-lg bg-primary bg-opacity-5 text-primary">
14 <svg width="17" height="10" viewBox="0 0 17 10" class="icon fill-current">
15 <path
16 d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
17 fill="#3056D3" stroke="#3056D3" />
18 </svg>
19 </div>
20 <div class="w-full">
21 <h4 class="text-lg font-semibold">
22 First Accordion Title
23 </h4>
24 </div>
25 </button>
26 <div x-show="accordionOne" class="faq-content pl-[62px]">
27 <p class="py-3 text-base leading-relaxed text-body-color">
28 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi nobis quo suscipit
29 impedit. Corrupti quo, dolorem ipsum magni, nesciunt ut eligendi autem nihil id dolorum
30 voluptatibus, repudiandae cum saepe sint.
31 </p>
32 </div>
33 </div>
34 <div class="single-faq mb-2 w-full rounded-lg border border-slate-300 dark:border-slate-600 p-2">
35 <button class="faq-btn flex w-full text-left" @click="accordionTwo = !accordionTwo">
36 <div
37 class="mr-5 flex h-10 w-full max-w-[40px] items-center justify-center rounded-lg bg-primary bg-opacity-5 text-primary">
38 <svg width="17" height="10" viewBox="0 0 17 10" class="icon fill-current">
39 <path
40 d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
41 fill="#3056D3" stroke="#3056D3" />
42 </svg>
43 </div>
44 <div class="w-full">
45 <h4 class="text-lg font-semibold">
46 Second Accordion Title
47 </h4>
48 </div>
49 </button>
50 <div x-show="accordionTwo" class="faq-content pl-[62px]">
51 <p class="py-3 text-base leading-relaxed text-body-color">
52 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi nobis quo suscipit
53 impedit. Corrupti quo, dolorem ipsum magni, nesciunt ut eligendi autem nihil id dolorum
54 voluptatibus, repudiandae cum saepe sint.
55 </p>
56 </div>
57 </div>
58 <div class="single-faq mb-2 w-full rounded-lg border border-slate-300 dark:border-slate-600 p-2">
59 <button class="faq-btn flex w-full text-left" @click="accordionThree = !accordionThree">
60 <div
61 class="mr-5 flex h-10 w-full max-w-[40px] items-center justify-center rounded-lg bg-primary bg-opacity-5 text-primary">
62 <svg width="17" height="10" viewBox="0 0 17 10" class="icon fill-current">
63 <path
64 d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
65 fill="#3056D3" stroke="#3056D3" />
66 </svg>
67 </div>
68 <div class="w-full">
69 <h4 class="text-lg font-semibold">
70 Third Accordion Title
71 </h4>
72 </div>
73 </button>
74 <div x-show="accordionThree" class="faq-content pl-[62px]">
75 <p class="py-3 text-base leading-relaxed text-body-color">
76 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi nobis quo suscipit
77 impedit. Corrupti quo, dolorem ipsum magni, nesciunt ut eligendi autem nihil id dolorum
78 voluptatibus, repudiandae cum saepe sint.
79 </p>
80 </div>
81 </div>
82 </div>
83 </div>
84 </div>
85</section>