Styling accordion

[Adam]

I am trying to perform the following tasks with a Blazor Accordion without any success from online material. It may be I have missed something as I learn Blazor. I want to: 

1. Remove the hover over header background colour to only use the cssClass background colour successfully applied to the header (see example)

2. Also remove the selected item background colour

3. Get rid of underline text decoration when hovering over item and selected item. I don't know where this comes from but is present in my simple example too. It seems I am missing some css as my very simple example doesn't match what I have seen online.

_Host.cshtml

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/materials.css" rel="stylesheet" />

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

4. Find a way to set the header colour that also applies to the drop down icon as well as increase size of icon

I have added a custom cssclass to set the item background colour that works, but can't remove hover or selected colour to leave this background colour

Whatever I try I cannot find how to remove the underline text decoration or colour of the hovered text.

I have removed everything from my css that could conflict

.e-btn-width {

    border-radius: 0;

    width: 100%;

}

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

        padding: 0 !important;

    }

        .e-accordion .e-acrdn-item .e-acrdn-header:hover {

        }

            .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {

                width: calc(100% - 4em) !important;

            }

                .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content > .container {

                    padding: 0 !important;

                }

        .courseVeryEasy {

            background-color: #97DAF8;

            border-color: #3966B1;

        }

Inside my razor page

            <SfAccordion Width="100%" EnableRtl="false">

                <AccordionItems>

                    <AccordionItem Header="help" Content="what is going on"></AccordionItem>

                    <AccordionItem Header="help" Content="what is going on"></AccordionItem>

                    <AccordionItem Header="help" Content="what is going on"></AccordionItem>

                </AccordionItems>

            </SfAccordion>

            <p></p>

            <SfAccordion Width="100%" EnableRtl="false">

                <AccordionItems>

                    @foreach (var crse in courses)

                    {

                        <AccordionItem [email protected]>

                            <HeaderTemplate>

                                <div class="courseHeaderTable">

                                    <div class="courseHeaderTable-name">

                                        @crse.CourseName

                                    </div>

                                    <div class="courseHeaderTable-grade">

                                        <span class="oi oi-badge" aria-hidden="true"></span> @crse.GradeShortName

                                    </div>

                                    <div class="courseHeaderTable-length">

                                        @if (crse.CourseName.ToLower().Contains("score"))

                                        {

                                            <span class="oi oi-clock" aria-hidden="true"></span> @crse.Distance

                                        }

                                        else

                                        {

                                            <span class="oi oi-resize-width" aria-hidden="true"></span> @crse.Distance

                                        }

                                    </div>

                                    <div class="courseHeaderTable-controls">

                                        @if (crse.CourseName.ToLower().Contains("score"))

                                        {

                                            <span class="oi oi-circle-x" aria-hidden="true"></span> @crse.Controls

                                        }

                                        else

                                        {

                                            <span class="oi oi-flag" aria-hidden="true"></span> @crse.Controls

                                        }

                                    </div>

                                    <div class="courseHeaderTable-pram">

                                        @if (@crse.PramFriendly)

                                        {

                                            <span class="oi oi-info" aria-hidden="true"></span>

                                        }

                                    </div>

                                </div>

                            </HeaderTemplate>

                            <ContentTemplate>

                                @crse.CourseDescription

                            </ContentTemplate>

                        </AccordionItem>

                    }

                </AccordionItems>

            </SfAccordion>

[Alagumeena Kalaiselvan]

Hi Adam, 

Thanks for contacting Syncfusion support. 

We have checked your reported queries and we suggest you to override the below CSS classes to achieve your case. 

Q1: How to Apply the background color while hovering accordion item based on CssClass 

<SfAccordion ID="Acrdn" Width="100%" EnableRtl="false"> 

    <AccordionItems> 

        @foreach (var crse in courses) 

        { 

            <AccordionItem [email protected]> 

                <HeaderTemplate> 

                    <div class="courseHeaderTable"> 

                        <div class="courseHeaderTable-name"> 

                            @crse.CourseName 

                        </div> 

                    </div> 

... 

</ SfAccordion > 

<style>     

.e-accordion#Acrdn .e-acrdn-item.Item1 .e-acrdn-header:hover { 

        background-color: #97DAF8 !important;  /*To Apply the background color while hovering accordion item based on CssClass*/ 

    } 

</style> 

Q2: How to Remove selected item(expanded/collapsed) background color. 

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header { 

        background: none !important;  /*To Remove selected item(expanded) background color*/ 

    } 

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

        background: none !important;  /*To Remove selected item(collapsed) background color*/ 

    } 

Q3: Get rid of underline text decoration when hovering over item and selected item. 

We have processed the underline for selected accordion header Text to bootstrap and bootstrap4 theme alone and you can completely avoid the underline by using rest of the themes .  Also, we noticed in your shared _Host.cshtml  and suggest you to refer a single theme reference in sample. 

Q4: Find a way to set the header color 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content { 

        color: blue !important;   /* To Apply the font color to selected accordion header*/ 

    } 

    .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon { 

        color: none !important;   /* To Apply the color to navigation icon for selected accordion header*/ 

    } 

Also, we have prepared a sample based on your shared sample code which can be get by the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Accordion-308181904  

Kindly check with shared sample and get back to us, if you need further assistance. 

Regards 

Alagumeena.K 

[Scott Taylor]

wait so is the only way to get rid of the underline is to use a theme that isn't bootstrap?

[Satheesh Kumar Balasubramanian]

Hi Scott, 

  

Thanks for your update. 

  

We have validated your reported query at our end. We have used the below customized style to remove underline text decoration when hovering over item and selected item in bootstrap theme itself. For the same we have prepared a sample for your reference which can be downloaded from the following link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155747/ze/AccordionComponent-1698381084 

  

Code Snippet: 

<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> 

  

<style> 

    .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, 

    .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content { 

        text-decoration: none; 

    } 

</style> 

  

Kindly try the above solution and get back to us if you need further assistance. 

  

Regards, 

Satheesh Kumar B 

[Bridget Murphy]

Thank you for sharing.

[Satheesh Kumar Balasubramanian]

You're welcome! Don't hesitate to reach out if you have any more questions or need further assistance