👀 Views: 56 💬 Answers: 1 📅 Created: 2025-06-10

html safari javascript details HTML

I'm upgrading from an older version and After trying multiple solutions online, I still can't figure this out..... I'm having trouble with the `<details>` element in Safari 15. While it works perfectly on Chrome and Firefox, the toggle does not respond as expected in Safari. When I click the summary, it doesn't open or close the details as it should. I suspect it might be something related to my JavaScript, as I also implemented a fallback for browsers that don't support `<details>`. Here's the code I have: ```html <details id="myDetails"> <summary>More Info</summary> <p>This is additional information that should be shown or hidden.</p> </details> <script> const details = document.getElementById('myDetails'); if (!('open' in details)) { // Fallback for browsers that do not support <details> const summary = details.querySelector('summary'); summary.addEventListener('click', function() { const isOpen = details.hasAttribute('open'); if (isOpen) { details.removeAttribute('open'); } else { details.setAttribute('open', ''); } }); } </script> ``` In Safari, the click event doesn’t seem to trigger the listener at all, and I’ve checked that the JavaScript is executing without errors (no behavior messages in the console). The details element just sits there doing nothing. I tried adding `event.preventDefault()` inside the click handler, thinking the default behavior might be conflicting, but that didn’t help. It’s frustrating because I want to ensure it works for all users, regardless of their browser. Any suggestions? Has anyone else encountered this? For reference, this is a production microservice. Thanks for taking the time to read this! I'm working with Html in a Docker container on Ubuntu 22.04. Any advice would be much appreciated.