Webstudio
Log in

Join the Webstudio community

Updated 5 months ago

Extended Styling Options for RADIX Accordion Component States

At a glance

The community member would like to have more control over the styling of the "Item" component, particularly the open state. They can currently only style the "Item Trigger" element, but would prefer to be able to style the entire "Item" element when it is open, including aspects like color and border. Another community member suggests adding styles to the "item content" to achieve this, but the original poster explains that this would only style the content inside the accordion, not the entire "Item" element. The original poster also wants to add a hover effect to the closed "Item" elements, but notes this can only be done by wrapping the "Item" in a div, not directly.

sszymonszczechowicz
If I could style the open state of the "Item" component according to my needs, I would have more control over its appearance. Currently, I can only style the open state of the "Item Trigger" element. Having the ability to work with "Item" states like hover, focus, or open would give me much more flexibility in customizing the component.

If I could style the open state directly on the "Item" element, I would be able to adjust aspects like color, border, or other visual properties of the open item.
J
s
2 comments
JJeremy
Why can't you add your token to the "item content"? It will take those styles and only display when the item is open.
sszymonszczechowicz
From what I understand, "item content" contains the content inside the accordion. As I mentioned, I would like to change the color of the entire "item" element when it is opened, so that closed "items" look different from the opened one. "Item content" only styles the content of the "item," unless I’m missing something. I would also like to add a hover effect to the closed "item." This can be done by wrapping it in a div, but not directly.
Add a reply
Sign up and join the conversation on Discord