For years I’ve used various “accordeon” implementations, ways to hide content like so:
Header of the accordeon
- Content Item 1
- Content Item 2
So I wrote, with much effort, a liquid function that does it well, above. And then I learn that there’s new stuff in HTML 5, using the tags “summary” and “details”, that does it “by itself”. I wish I had known this earlier. This is what it looks like:
Header of the accordeon
- Content Item 1
- Content Item 2
That’s it! I find the disclosure triangle is not at the right place, maybe I haven’t mastered it yet. Ah: now I see, if I remove the <h3></h3> tags around the Header line it’s fine. Hmm, more work needed.