1

This question already has an answer here:

I'm trying to follow this document https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/example to create an accordion section that resembles a page layout. This is the code:

<template>
    <lightning-card  title="Hello">
        <p>{activeSectionsMessage}</p>
        <lightning-accordion allow-multiple-sections-open
                                onsectiontoggle={handleSectionToggle}
                                active-section-name={activeSections}>
        <lightning-accordion-section name="A" label="Accordion Title A">
                <p>This is the content area for section A.</p>
                <p>Donec vitae tellus egestas, faucibus ipsum ac, imperdiet erat. Nam venenatis non ante at sagittis. Integer vel purus eget nunc semper placerat. Nam tristique quam leo, et posuere enim condimentum quis. Ut sagittis libero id lectus tempor maximus. Nunc ut tincidunt eros, a hendrerit leo. Suspendisse quis fermentum dolor. Nulla euismod consectetur leo, id condimentum nunc consequat quis.</p>
            </lightning-accordion-section>

            <lightning-accordion-section name="B" label="Accordion Title B">
                <p>This is the content area for section B.</p>
                <p>Nam at elit et justo scelerisque ullamcorper vel a felis. Mauris sit amet lorem sed est sagittis blandit nec ac turpis. Ut a mi id turpis pharetra ornare. Nullam rhoncus feugiat nunc, ac pulvinar felis pulvinar at. Nullam efficitur aliquet justo et ultricies. Maecenas eu felis aliquam, tincidunt elit at, suscipit leo. Duis ut urna nec nibh hendrerit lacinia. Sed non auctor libero. Sed pellentesque tempor mollis.</p>
            </lightning-accordion-section>

            <lightning-accordion-section name="C" label="Accordion Title C">
                <p>This is the content area for section C.</p>
                <p>Nulla ornare ipsum felis, vel aliquet dui blandit vel. Integer accumsan velit quis mauris pharetra, nec sollicitudin dui eleifend. Cras condimentum odio mi, nec ullamcorper arcu ullamcorper sed. Proin massa arcu, rutrum a ullamcorper nec, hendrerit in sem. Etiam tempus eros ut lorem tincidunt, id condimentum nulla molestie. Morbi hendrerit elit pretium, ultrices neque non, ullamcorper justo. Quisque vel nisi eget eros efficitur semper. Nulla pulvinar venenatis quam vitae efficitur. Nam facilisis sollicitudin quam ac imperdiet.</p>
            </lightning-accordion-section>
        </lightning-accordion>
    </lightning-card>
</template>

Result: enter image description here

I want to change the color of the title "Accordion Title A/B/C" to be grey, exactly like in a page layout.

i don't understand what i am missing but i cant change the background of it.

i simply tried to do

.slds-accordion__summary {
    color: red;
}

without success.

marked as duplicate by salesforce-sas, battery.cord, crmprogdev, glls, Mohith Shrivastava Sep 19 at 0:21

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Would you not need to do <lightning-accordion-section name="A" label="Accordion Title A" class="sdlc-accordion_summary">? – Luke Bray Sep 18 at 8:54
  • But slds-accordion_summary is something that's added when using the accordion component. Why do i need to add it to the markup? – Dana Griff Sep 18 at 8:57