The details and summary elements are relative newcomers to the HTML canon and I was curious what mischief I could get up to with them. The spoiler is quite a lot but their is an aesthetic limitation to be overcome before any of my experiments could become practicable.
To start, let's take a quick tour of the HTML and some of its hidden features. On the face of it there is a element that wraps both a element, that is always shown, along with whatever you want present when the details element is open.
<details>
<summary>Summary</summary>
<div>Content</div>
</details>
Although this can be multiple elements I have found containing everything other than the summary element makes things easier to style.
The default behaviour of the details element is to toggle between hiding and showing the inner content when the summary is clicked, without the need for any JS code. In the later experiments there is some JS code to achieve more functionality but a great deal can be done without.
Codepen basic details/summary example.
There are two pseudo elements employed by the details and summary elements. The most obvious one is ::marker which is the triangle usually shown before any text (or other content) of the summary element in the top left-hand corner. Toggling the content will also cause the marker to rotate back and forth, again no JS required.
The second, and actually more useful pseudo element is ::details-content and can be used to reference immediate children of the details element other than summary. This comes in very handy for styling the content when in the open state, i.e. when the details element has an open attribute assigned.
In the first proper (term used advisedly) experiment we will also take advantage of more built-in behaviour of the details element. The name property, when the same value is applied to more than one details element, ensures (without JS) only one ::details-content is presented at a time. Thus, we can easily create a form of accordion component only using HTML and CSS.
At this point the ::details-content has always been in close proximity of the summary element, in fact immediately following (below) but it does not have to be. By applying a position other than the default static we can configure other regular components. Clicking on the summary toggles the open state of its details parent but clicking the ::details-content requires a little JS code to have the same effect. We could wrap the content inside the summary and apply some addition CSS styling to save us using JS but we would be unable to use the ::details-content pseudo elements, it is quite a distortion of the components purpose and is bound to have an adverse impact on the accessibility of the mark-up.
In the tabs example we align all the summary elements horizontally at the top of the component. The content panel (::details-content) is positioned immediately below thesummary`s across the full width of the component. All this can be achieved using CSS alone.
The ribbon is similar to the tabs component but with a short panel containing selectable options. There is a little JS code in this example that is required to close all the details elements when an option in the content panel is selected (clicked or keypress).
In the final example we use the composition of several details to construct a multi-level menu.
The aesthetic limitation
The expansion/collapsing behaviour of the details/summary is quite abrupt, snapping open and closed. At this point in time it does not appear to be possible to animate the behaviour for a smooth presentation.
Top comments (6)
I think there will never be a native solution, but all of the opening an closing animations I saw use a set height to have an anchor point for the animation.
Hi David, Thanks for your comment. There are proposals for a CSS feature to enable animation of HTML elements without specific sizes but they are not fully supported yet. Please see Ali's comment below and this newer video by Kevin Powell. youtu.be/WhS4xRSIjws?feature=shared
It still forces you to use height. Sure
height: autois easier than doing the calculation yourself.@starting-style is a solution that works in most browsers.
With this feature you can use other properties to animate the opening.
details/summary is wonderful! It is great for having a semantic html, and it is good for SEO as you van use it without any javascript and render it server side, the only issue with it as you said is that it doesn't get max height so having an animation is hard, although there is a way to animate height but it is not supported by many browsers.
Here is a link how to do it: youtu.be/Vzj3jSUbMtI?si=WRU3BMVPfq...
Thanks, I was aware of this facility. I been as subscriber to Kevin's YouTube channel for a few years. Have you seen this: youtu.be/WhS4xRSIjws?feature=shared
No, I will watch it thanks a lot🙏🏻