1

I have an accordion implemented in lightning data table, and I want to change the style (background color) of the accordion Summary whenever the section is opened. I didn't know how to implement a CSS for the opened section. I tried the (Styling Hooks) below but it didn't work:

.THIS .slds-is-open > .slds-accordion__summary-heading {
  background-color: var(--sds-c-accordion-summary-color-background, red);
  }
2
  • Hi, and welcome to SFSE! In order to better assist you, you should provide some code to demonstrate what you've done so far (you can edit your post to include this information). Please read about How to Ask and take the tour so you know what is expected of your question. We'll be happy to help you once we have more information.
    – sfdcfox
    Apr 9, 2021 at 12:28
  • original post amended to include some code. Apr 9, 2021 at 13:38

1 Answer 1

1

That's now how that works. You should specify the selector to use, and the hook you wish to modify. Normally, this will be something like:

.slds-is-open {
  --sds-c-accordion-summary-color-background: red;
}

The documentation explains how it works in the background, using the CSS var() function, but the part you need to focus on is setting the value.


To get this to work, you have to set a property you have access to. After some experimentation, I came up with the following code:

import { LightningElement } from "lwc";

export default class Q320026lwc extends LightningElement {
  sections = [
    { title: "Section 1", body: "Section 1 Content", id: "1" },
    { title: "Section 2", body: "Section 2 Content", id: "2" },
    { title: "Section 3", body: "Section 3 Content", id: "3" },
    { title: "Section 4", body: "Section 4 Content", id: "4" },
  ];
  onsectiontoggle(event) {
    let openSections = event.detail.openSections;
    let sections = this.template.querySelectorAll(
      "lightning-accordion-section"
    );
    sections.forEach((section) => {
      section.dataset.open = !!(openSections.indexOf(section.name) > -1);
    });
  }
}

<template>
    <lightning-accordion onsectiontoggle={onsectiontoggle}>
        <lightning-accordion-section name={section.id} label={section.title} for:each={sections} for:item="section"
            key={section.id}>
            {section.body}
        </lightning-accordion-section>
    </lightning-accordion>
</template>

[data-open="true"] {
  --sds-c-accordion-summary-color-background: red;
}

We use the sectiontoggle event to determine what's open, then attach a custom data element to the section. We can use this attribute to trigger the custom CSS.

6
  • the above selector didn't work. I will post my HTML template: <lightning-accordion allow-multiple-sections-open onsectiontoggle={handleToggleSection}> <template if:true={topics}> <template for:each={topics} for:item="topic"> <lightning-accordion-section name={topic.Id} label={topic.Name} key={topic.Id} > </lightning-accordion-section> </template> </template> </lightning-accordion> Apr 9, 2021 at 14:11
  • @Tania-MariaDib It may need to be :host .slds-is-open. I haven't used it yet, I'm just going on the documentation.
    – sfdcfox
    Apr 9, 2021 at 14:16
  • I tried :host, and it is not working as well ... i read the documentation .. but didn't figure out how to change the summary backgroud once the section is opened. Apr 9, 2021 at 14:24
  • @Tania-MariaDib I wonder if this is a new Summer 21 feature that isn't globally available yet? I'll see if I can make something work.
    – sfdcfox
    Apr 9, 2021 at 14:43
  • 1
    @Tania-MariaDib I figured it out. It requires a little help from some code, but the new version should work as advertised.
    – sfdcfox
    Apr 9, 2021 at 16:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .