How can I make it so that the contents of an accordion closes when it is clicked?
How can I make it so that the contents of an accordion closes when it is clicked?
At a glance
The post clarifies that the content itself, not the header, should be clicked to trigger an accordion. Community members discuss that this is an uncommon pattern and may create issues, such as preventing access to links within the content. The community members explore various approaches to address these challenges, including using HTML embeds, modifying accessibility attributes, and building a custom solution. The reason for this approach is to have a popup on mobile and an accordion on desktop. Ultimately, the community members conclude that starting from scratch may be the best approach, and suggest building a desktop accordion and a mobile popup, potentially using a collection/JSON to display the content.
That is a good point, I managed to get it to work by adding an HTML embed with a event listener, but now I'm running into an issue that the accordion needs to be double clicked to expand after it's been minimized with my HTML embed, not sure why. When I have a chance I will just build the element I want from scratch rather than trying to hack the accordion
The reason is for mobile where the accordion expanding down didn't look good, so I wanted to style it to be a popup on mobile and an accordion on desktop
WIth Radix, you'd need to write JS to modify the accessiblity attributes and the open/close options. You're kinda hijacking the entire thing, it sounds like a big pain to be honest. haha