ACCORDION

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.

DEFAULT 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

Accordion Heading1

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.

Accordion Heading2

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.

Accordion Heading3

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>
                    
                

ACCORDION WITH OUTLINE & CONTROLS

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

Accordion Heading1

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.

Accordion Heading2

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.

Accordion Heading3

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>

                    
                

ACCORDION WITH COLLAPSIBLE PANEL

To make the accordion collapse, add data-collapsible="true" as an attribute to the accordion element.

Accordion Heading1

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.

Accordion Heading2

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.

Accordion Heading3

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>