Move expand/collapse icon to left side of header?

[Joe Sperlak]

I am wondering if there is a way to move the expand/collapse icon to the left side of the header instead of the default of right. I tried enableRTL but that made everything shift to the right. 

[Ashokkumar Karuppasamy]

Hi Joe Sperlak

You can achieve your requirement by overriding the accordion styles to meet your needs. The attached code snippet and sample demonstration solution are provided below.

Please try the solution and let us know if you need any further assistance.

Sample: https://blazorplayground.syncfusion.com/rXBSXUCNyDKRbwNU

@using Syncfusion.Blazor.Navigations

<div class="component-container">

    <SfAccordion>

        <AccordionItems>

            <AccordionItem Header="Margeret Peacock" Content="Margeret Peacock was born on Saturday , 01 December 1990. Now lives at Coventry House Miner Rd., London, UK. Margeret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>

            <AccordionItem Header="Laura Callahan" Content="Laura Callahan was born on Tuesday , 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London, UK. Laura Callahan holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>

            <AccordionItem Header="Albert Dodsworth" Content="Albert Dodsworth was born on Thursday , 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle, USA. Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday , 01 May 2009"></AccordionItem>

        </AccordionItems>

    </SfAccordion>

</div>

 

<style>

    .e-accordion .e-acrdn-item.e-select>.e-acrdn-header {

    display: flex;

    flex-direction: row-reverse;

    justify-content: left;

    align-items: center;

}

.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {

    position: relative;

}

</style>

 

Regards,
Ashok