As of Chrome 131 you have more options to style <details> and <summary>.
You can now set display property values other than block on these elements, and also use a ::details-content pseudo-element to style the part that expands and collapses.
The following demo featuring a horizontal accordion uses all these features:
See the Pen
Styling <details>: Horizontal Accordion by web.dev (@web-dot-dev)
on CodePen.
If your browser does not support these features yet, check out the reference recording at the top of this post. At the time of writing, only Chrome supports these additions. The PR to add this to WebKit already got merged on main, so you can also expect this in an upcoming Safari release.
Go read my article on developer.chrome.com to learn all about it.