.accordion-body<Accordion open={open} toggle={toggle} className="app-accordion accordion-secondary">
<AccordionItem key="1">
<AccordionHeader targetId="collapseOne">آیتم آکاردئون شماره ۱</AccordionHeader>
<AccordionBody accordionId="collapseOne">
<strong>این متن مربوط به محتوای اولین آکاردئون است.</strong> بهصورت پیشفرض نمایش داده میشود تا زمانی که افزونهی collapse کلاسهای موردنیاز را برای استایلدهی اضافه کند. این کلاسها ظاهر کلی و همچنین باز و بسته شدن از طریق انیمیشنهای CSS را کنترل میکنند. میتوانید هر بخش از آن را با CSS دلخواه یا متغیرهای پیشفرض ویرایش کنید. همچنین توجه داشته باشید که هر نوع محتوای HTML میتواند داخل <code>.accordion-body</code> قرار گیرد، هرچند انتقالها باعث محدود شدن overflow میشوند.
</AccordionBody>
</AccordionItem>
<AccordionItem key="2">
<AccordionHeader targetId="collapseTwo">آیتم آکاردئون شماره ۲</AccordionHeader>
<AccordionBody accordionId="collapseTwo">
<strong>این متن مربوط به محتوای دومین آکاردئون است.</strong> بهصورت پیشفرض مخفی است تا زمانی که افزونهی collapse کلاسهای لازم را اضافه کند.
</AccordionBody>
</AccordionItem>
<AccordionItem key="3">
<AccordionHeader targetId="collapseThree">آیتم آکاردئون شماره ۳</AccordionHeader>
<AccordionBody accordionId="collapseThree">
<strong>این متن مربوط به محتوای سومین آکاردئون است.</strong> بهصورت پیشفرض مخفی است تا زمانی که افزونهی collapse کلاسهای لازم را اضافه کند.
</AccordionBody>
</AccordionItem>
</Accordion>.accordion-body قرار گیرد، هرچند ترنزیشن باعث محدودیت overflow میشود..accordion-body قرار گیرد.<Accordion open={openOutline} toggle={toggleOutline} className="accordion-outline-secondary">
<AccordionItem key="outline-1">
<AccordionHeader targetId="1">آیتم آکاردئون شماره ۱</AccordionHeader>
<AccordionBody accordionId="1">
<strong>این متن برای نمایش آکاردئون نوع حاشیهدار است.</strong> بهصورت پیشفرض نمایش داده میشود تا زمانی که افزونهی collapse کلاسهای لازم را برای استایلدهی هر بخش اضافه کند. این کلاسها ظاهر کلی و همچنین باز و بسته شدن با استفاده از ترنزیشنهای CSS را کنترل میکنند. میتوانید با CSS سفارشی یا تغییر متغیرهای پیشفرض آن را ویرایش کنید. همچنین هر نوع محتوای HTML میتواند درون `.accordion-body` قرار گیرد، هرچند ترنزیشن باعث محدودیت overflow میشود.
</AccordionBody>
</AccordionItem>
<AccordionItem key="outline-2">
<AccordionHeader targetId="2">آیتم آکاردئون شماره ۲</AccordionHeader>
<AccordionBody accordionId="2">
<strong>این متن مربوط به دومین آکاردئون حاشیهدار است.</strong> بهصورت پیشفرض مخفی است تا زمانی که افزونهی collapse کلاسهای مورد نیاز را اضافه کند.
</AccordionBody>
</AccordionItem>
<AccordionItem key="outline-3">
<AccordionHeader targetId="3">آیتم آکاردئون شماره ۳</AccordionHeader>
<AccordionBody accordionId="3">
<strong>این متن مربوط به سومین آکاردئون است.</strong> بهصورت پیشفرض مخفی است تا زمانی که افزونهی collapse کلاسهای لازم را اضافه کند. همچنین هر نوع محتوای HTML میتواند درون `.accordion-body` قرار گیرد.
</AccordionBody>
</AccordionItem>
</Accordion>. accordion-flush طراحی شده است. این بخش، محتوای اولین آکاردئون است.. accordion-flush طراحی شده است. این بخش، محتوای دومین آکاردئون است.. accordion-flush طراحی شده است. این بخش، محتوای سومین آکاردئون است.<Accordion open={openLight} toggle={toggleLight} className="accordion-light-secondary">
<AccordionItem key="light-1">
<AccordionHeader targetId="1">آیتم آکاردئون روشن شماره ۱</AccordionHeader>
<AccordionBody accordionId="1">
این متن نمونهای برای آکاردئون روشن است که جهت نمایش عملکرد کلاس <code>.accordion-flush</code> طراحی شده است. این بخش، محتوای اولین آکاردئون است.
</AccordionBody>
</AccordionItem>
<AccordionItem key="light-2">
<AccordionHeader targetId="2">آیتم آکاردئون روشن شماره ۲</AccordionHeader>
<AccordionBody accordionId="2">
این متن نمونهای برای آکاردئون روشن است که جهت نمایش عملکرد کلاس <code>.accordion-flush</code> طراحی شده است. این بخش، محتوای دومین آکاردئون است.
</AccordionBody>
</AccordionItem>
<AccordionItem key="light-3">
<AccordionHeader targetId="3">آیتم آکاردئون روشن شماره ۳</AccordionHeader>
<AccordionBody accordionId="3">
این متن نمونهای برای آکاردئون روشن است که جهت نمایش عملکرد کلاس <code>.accordion-flush</code> طراحی شده است. این بخش، محتوای سومین آکاردئون است.
</AccordionBody>
</AccordionItem>
</Accordion>.accordion-flush میباشد. این متن بدنه آیتم شماره 1 آکاردئون است..accordion-flush میباشد. این متن بدنه آیتم شماره 2 آکاردئون است..accordion-flush میباشد. این متن بدنه آیتم شماره 3 آکاردئون است.<Accordion open={openFlush} toggle={toggleFlush} className="accordion-flush accordion-secondary">
<AccordionItem key="flush-1">
<AccordionHeader targetId="flush-collapse-1">
Accordion Item #1
</AccordionHeader>
<AccordionBody accordionId="flush-collapse-1">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the 1 item's accordion body.
</AccordionBody>
</AccordionItem>
<AccordionItem key="flush-2">
<AccordionHeader targetId="flush-collapse-2">
Accordion Item #2
</AccordionHeader>
<AccordionBody accordionId="flush-collapse-2">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the 2 item's accordion body.
</AccordionBody>
</AccordionItem>
<AccordionItem key="flush-3">
<AccordionHeader targetId="flush-collapse-3">
Accordion Item #3
</AccordionHeader>
<AccordionBody accordionId="flush-collapse-3">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the 3 item's accordion body.
</AccordionBody>
</AccordionItem>
</Accordion><Accordion className="accordion-icon" defaultOpen="1">
<AccordionItem key="0">
<AccordionHeader targetId="1">
<i className="ti [object Object] me-1 f-s-20"></i> اگر فقط جریمهام را پرداخت کنم چه اتفاقی میافتد؟
</AccordionHeader>
<AccordionBody accordionId="1">
پرداخت جریمه بدون اعتراض به آن میتواند منجر به ثبت محکومیت در سوابق رانندگی شما شود. این موضوع ممکن است پیامدهای طولانیمدتی مانند افزایش نرخ بیمه، تعلیق گواهینامه، محدودیتهای شغلی و جریمههای اضافی از سوی پلیس راهور داشته باشد.
</AccordionBody>
</AccordionItem>
<AccordionItem key="1">
<AccordionHeader targetId="2">
<i className="ti [object Object] me-1 f-s-20"></i> آیا این جریمه میتواند روی شغلم تأثیر بگذارد؟
</AccordionHeader>
<AccordionBody accordionId="2">
بله، ثبت جریمه در سوابق رانندگی شما میتواند منجر به سلب صلاحیت از رانندگی تجاری یا دریافت گواهینامه پایه یک شود. همچنین ممکن است باعث شود نتوانید در سرویسهای اشتراک سفر مانند اسنپ یا تپسی که نیاز به سابقه رانندگی پاک دارند، فعالیت کنید.
</AccordionBody>
</AccordionItem>
<AccordionItem key="2">
<AccordionHeader targetId="3">
<i className="ti [object Object] me-1 f-s-20"></i> چقدر طول میکشد تا به پرونده من رسیدگی شود؟
</AccordionHeader>
<AccordionBody accordionId="3">
این موضوع کاملاً به دادگاهی که پرونده شما در آن جریان دارد بستگی دارد. برخی دادگاهها سریعتر از بقیه عمل میکنند، اما به طور میانگین ممکن است بین 1 تا 3 ماه زمان ببرد که در فرایندهای قانونی کاملاً طبیعی است.
</AccordionBody>
</AccordionItem>
</Accordion><Accordion className="accordion-icon" defaultOpen="1">
<AccordionItem key="0">
<AccordionHeader targetId="1">
<i class='ti ti-message-report me-1 f-s-20'></i> اگر فقط جریمهام را پرداخت کنم چه اتفاقی میافتد؟
</AccordionHeader>
<AccordionBody accordionId="1">
پرداخت جریمه بدون اعتراض به آن میتواند منجر به ثبت محکومیت در سوابق رانندگی شما شود. این موضوع ممکن است پیامدهای طولانیمدتی مانند افزایش نرخ بیمه، تعلیق گواهینامه، محدودیتهای شغلی و جریمههای اضافی از سوی پلیس راهور داشته باشد.
</AccordionBody>
</AccordionItem>
<AccordionItem key="1">
<AccordionHeader targetId="2">
آیا این جریمه میتواند روی شغلم تأثیر بگذارد؟
</AccordionHeader>
<AccordionBody accordionId="2">
بله، ثبت جریمه در سوابق رانندگی شما میتواند منجر به سلب صلاحیت از رانندگی تجاری یا دریافت گواهینامه پایه یک شود. همچنین ممکن است باعث شود نتوانید در سرویسهای اشتراک سفر مانند اسنپ یا تپسی که نیاز به سابقه رانندگی پاک دارند، فعالیت کنید.
</AccordionBody>
</AccordionItem>
<AccordionItem key="2">
<AccordionHeader targetId="3">
چقدر طول میکشد تا به پرونده من رسیدگی شود؟
</AccordionHeader>
<AccordionBody accordionId="3">
این موضوع کاملاً به دادگاهی که پرونده شما در آن جریان دارد بستگی دارد. برخی دادگاهها سریعتر از بقیه عمل میکنند، اما به طور میانگین ممکن است بین 1 تا 3 ماه زمان ببرد که در فرایندهای قانونی کاملاً طبیعی است.
</AccordionBody>
</AccordionItem>
</Accordion><Accordion className="app-accordion accordion-light-danger app-accordion-no-icon" id="accordionnoiconExample">
<AccordionItem key="0">
<AccordionHeader targetId="1">
<button className="accordion-button" type="button" aria-expanded="true" aria-controls="noicon-collapse-1">
اگر فقط جریمهام را پرداخت کنم چه اتفاقی میافتد؟
</button>
</AccordionHeader>
<AccordionBody accordionId="1">
پرداخت جریمه بدون اعتراض به آن میتواند منجر به ثبت محکومیت در سوابق رانندگی شما شود. این موضوع ممکن است پیامدهای طولانیمدتی مانند افزایش نرخ بیمه، تعلیق گواهینامه، محدودیتهای شغلی و جریمههای اضافی از سوی پلیس راهور داشته باشد.
</AccordionBody>
</AccordionItem>
<AccordionItem key="1">
<AccordionHeader targetId="2">
<button className="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="noicon-collapse-2">
آیا این جریمه میتواند روی شغلم تأثیر بگذارد؟
</button>
</AccordionHeader>
<AccordionBody accordionId="2">
بله، ثبت جریمه در سوابق رانندگی شما میتواند منجر به سلب صلاحیت از رانندگی تجاری یا دریافت گواهینامه پایه یک شود. همچنین ممکن است باعث شود نتوانید در سرویسهای اشتراک سفر مانند اسنپ یا تپسی که نیاز به سابقه رانندگی پاک دارند، فعالیت کنید.
</AccordionBody>
</AccordionItem>
<AccordionItem key="2">
<AccordionHeader targetId="3">
<button className="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="noicon-collapse-3">
چقدر طول میکشد تا به پرونده من رسیدگی شود؟
</button>
</AccordionHeader>
<AccordionBody accordionId="3">
این موضوع کاملاً به دادگاهی که پرونده شما در آن جریان دارد بستگی دارد. برخی دادگاهها سریعتر از بقیه عمل میکنند، اما به طور میانگین ممکن است بین 1 تا 3 ماه زمان ببرد که در فرایندهای قانونی کاملاً طبیعی است.
</AccordionBody>
</AccordionItem>
</Accordion>این متن بدنه دومین آیتم آکاردئون است که به طور پیشفرض پنهان شده است.
<Accordion flush className="app-accordion accordion-light-success app-accordion-plus" id="nestingExample">
<AccordionItem>
<AccordionHeader targetId="nestingcollapse1">
این سطح اول آکاردئون شماره 1 است
</AccordionHeader>
<AccordionBody accordionId="nestingcollapse1">
<Accordion flush className="app-accordion app-accordion-icon-left app-accordion-plus" id="nestingtwoExample0">
<AccordionItem>
<AccordionHeader targetId="nestingtwocollapse01">
این سطح دوم آکاردئون شماره 1 است
</AccordionHeader>
<AccordionBody accordionId="nestingtwocollapse01">
این بخش، بدنه آیتم اول آکاردئون است که به صورت پیشفرض نمایش داده میشود.
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader targetId="nestingtwocollapse02">
این سطح دوم آکاردئون شماره 2 است
</AccordionHeader>
<AccordionBody accordionId="nestingtwocollapse02">
این بخش، بدنه آیتم دوم آکاردئون است که به طور پیشفرض پنهان میباشد تا زمانی که افزونه مربوطه کلاسهای لازم را برای استایلدهی اضافه کند. این کلاسها ظاهر کلی، نمایش یا مخفی شدن عناصر را از طریق انتقالهای CSS کنترل میکنند.
</AccordionBody>
</AccordionItem>
</Accordion>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader targetId="nestingcollapse2">
این سطح اول آکاردئون شماره 2 است
</AccordionHeader>
<AccordionBody accordionId="nestingcollapse2">
<p>This is the second item's accordion body. It is hidden by default.</p>
</AccordionBody>
</AccordionItem>
</Accordion>