NO BUG: Accordion (Nestable) problem with <details> and <summary>

(Tested with Google Chrome.)

If you want to use the < details > and < summary > tags for the Accordion (Nestable) element, everything works as long as you have not activated “Expand first item”.

If you use these tags and want to expand the first accordion, the first accordion does not work.

This is probably due to the fact that < details > itself adds an “open” and this causes complications.

image

image

image

Addendum: I have now noticed that there are also problems if the “Expand first item” checkbox is not activated (details and summary tag used).

If you then open and close the accordions relatively “wildly”, something no longer works. Accordions that should actually be open are displayed as closed and vice versa. Unfortunately, I cannot recognize a system.

Hi stabilo,
Thanks so much for your report!

Even if the details + summary HTML element is visually and functionally similar to an accordion, they are still different. Therefore, it is not advisable to mix them.

https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html

Best regards,
timmse

1 Like

Thank you for the clarification. I was not aware of that. I did a lot of research, but I only found sources that were of the opinion that you can use < summary > and < details > for accordions and they are semantically correct.