Swavy UI accordion is used for toggling contents within an HTML page, that is, it hides/shows contents on clicking the accordion toggler. Below is the code snippet for Swavy UI accordion.
To add rounded corners to Swavy UI accordion, add sw_rsq-2 to the class attribute of the accordion element. You can set the depth of the rounded corners ranging from 1 - 8
To set background color for Swavy UI accordion, you can use any color from the color spectrum, for example, add bg-coral to the class attribute of the accordion element to add background color of coral
To make panels have space in-between, add panel_collapse to the class attribute of the accordion element. You can set the depth of the rounded corners ranging from 1 - 8
To change the hover color of the accordion toggler, you can alter the styling of the accordion toggler in your CSS file: .sw_accordion-toggler:hover
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
<div class="sw_accordion sw_accordion-bg" role="tablist" data-control="false">
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading1</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading2</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" data-toggle="accordion">Accordion Heading3</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
</div>
To add controls to Swavy UI accordion, add data-control="true" as an attribute to the accordion element.
To set border color for Swavy UI accordion, you can use any color from the color spectrum, for example, add br-indigo to the class attribute of the accordion element to add border color of indigo
To add border under the accordion toggler on open, add .panel_border to the class attribute of the accordion element
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
<div class="sw_accordion sw_accordion-outline br-yellow" role="tablist" data-control="true">
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading1</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading2</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading3</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
</div>
To make the accordion collapse, add data-collapsible="true" as an attribute to the accordion element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse, nostrum labore sunt voluptates! Repellendus, ab veritatis accusantium sint.
<div class="sw_accordion sw_accordion-bg panel_collapse" role="tablist" data-control="true" data-collapsible="true">
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading1</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" role="tab" data-toggle="accordion">Accordion Heading2</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
<details class="sw_accordion-details">
<summary class="sw_accordion-toggler" data-toggle="accordion">Accordion Heading3</summary>
<div class="sw_accordion-wrapper" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia velit ducimus delectus, neque laboriosam fugiat sequi nam est vitae dolore esse,
nostrum labore sunt voluptates!
Repellendus, ab veritatis accusantium sint.</p>
</div>
</details>
</div>
Support us to contribute to the continuous development of Swavy UI and other open source software.
SPONSOR