Custom Accordion Components

Single Toggle Open One at a time

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.

Section 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Section 3

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

<div class="accordion" data-mode="single" id="accordion1"> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 1</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 2</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 3</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p> </div> </div> </div>

Multiple Toggle Open Multiple at once

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.

Section 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Section 3

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

<div class="accordion" data-mode="multiple" id="accordion2"> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 1</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 2</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 3</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p> </div> </div> </div>

Toggle Open Collapse all

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.

Section 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Section 3

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

<button class="btn btn-gradient toggle-all-button mb-4" data-target="accordion3">Expand All</button> <div class="accordion" data-mode="multiple" id="accordion3"> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 1</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 2</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <span class="accordion-header-text">Section 3</span> <span class="accordion-icon"> <i data-lucide="chevron-down"></i> </span> </div> <div class="accordion-content"> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p> </div> </div> </div>