How can I make it so that the contents of an accordion closes when it is clicked?

This isn't a common pattern for accordions. It breaks what people are used to. What's the reason you'd want to do this?

For example: Imagine you have text with a link within that content, you've just created no way to access that link.

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

And to fix the link issue you mentioned I ended up making an x button on the mobile popup instead of the whole body being clickable to minimize

Yeah, I'm going at this wrong haha. Will start from scratch

You could build a desktop accordion and then a popup for mobile. Hide/display each on appropriate breakpoints.

You could use a collection/JSON to display these so you don't need to rewrite the content each time.

Now I feel stupid 🙃

Great ideas! Thank you!

haha, no need to feel stupid. 🙂

Appreciate the help 🙂

no prob!