Dynamically change section color using JS/CSS in skuid

Hi there,

I would like to change color of the section/text which is inside the accordion. By default, the heading should display in blue color, when I click the section to open it, it should change to black color.

How do we achieve that using a snippet?

How to add css to the component?

I tried to add this, doesn’t work

skuid.$C(‘coponent-unique-name’).element.css({

‘color’: blue

});

Hi Anjana-Malhotra,

Using different colors for the different states (open/close) sounds like a great idea, I’ll log it as an enhancement request. Please find general information in our online docs about how to customize the Design Systems: Extending Design Systems with Code — Skuid v15.1.7 Documentation

I’ll circle around and see if anyone has an idea for the snippet itself.

Regards,
Luzie

Returning this JSS in your Accordion style variant in the Design System should do the trick:

"section-button": {
	"&[aria-expanded=true]": {
		"color": "black",
	},
},

Or use the following if you want to only change the text and not the arrow down:

@Luzie_Baumgart , how do we add JSS ? I don’t see any option in DSS to add JSS.

Hi @Anjana-Malhotra, looks like this is not enabled for you. Please send an email with your Salesforce Org Id to us: support@skuid.com

Thanks in advance,
Luzie