htmliosfirefox

HTML details tag with same name attribute doesn't get closed automatically on some Apple devices and Firefox


Referring to both MDN Web Docs and WHATWG, that multiple <details> element may share same name attribute that cause other details element closed automatically when a details element opened. Apparently Firefox and some Apple devices don't behave like that (MacBook does, but not with IPhone and IPad). You can try it in the MDN Web Docs that came with example of it. Is this a bug? Is there a workaround to this? I need to avoid the usage of Javascript for my static web app.


Solution

  • This answer is written in August 2024.

    As both the website you linked as well as caniuse.com state, "Exclusive accordion" (named details) will only be supported in Firefox from version 130 onwards, which comes out start of September 2024.

    As for the Apple devices, it depends on what browser they are using. For Safari on iOS (default browser on current iPhones), this feature is supported only on versions that were released after 11th December, 2023. Not all users will have updated their browser by now.

    Is this a bug?

    It takes time to implement new requirements. I would say support for this is a feature which has not yet seen the market.

    Is there a workaround to this?

    The only other possibility to animate something without Javascript I am aware of would be using CSS animations. Please ask a separate question for how to implement that.