The article discusses the <details> HTML element, highlighting the usability improvements offered by its [name] attribute that allows only one disclosure box to be open at a time. This feature is particularly beneficial on smaller screens to improve user experience. However, it poses a challenge of losing scroll position when toggling elements containing large content. The author suggests using JavaScript to listen for toggles and adjust the scroll position using scrollIntoView(), emphasizing a balance between improving usability and user autonomy, while also noting polyfill options for broader compatibility.
I was about to invent a wheel with some JavaScript, but just in case I thought I'd take a look at <details> specs. A very simple HTML element that I thought I knew everything about hid a very useful feature - [name] attribute that enables to have only one disclosure box open at a time.
You can run, you can hide, but you cannot escape JavaScript, especially when it comes to improving the usability of UI. We can listen to toggling using toggle event triggered on <details> element and correct scroll position with the help of scrollIntoView() function.
I am not a fan of interfering with user's interactions too much, so using scrollIntoViewIfNeeded() would be a wiser choice if the function was also supported by Firefox.
However, this could be easily polyfilled.
Collection
[
|
...
]