The gist here is leveraging a hidden checkbox to maintain expand/collapse state and css :before {content: "xyz" } to add the expand/collapse widget which keeps the additional markup minimal.
Markdown compatible :)
<p></p><input type="checkbox" class="expander">
#### Expandified Heading
* bullet
* bullet
* <input type="checkbox" class="expander"><i>another expander</i>
* nested content that will be expanded
yeah i know, what’s up with the the extra <p> tag pal?! those sprinkles on my minimalist-day parade are the only way i could get my blog’s markdown renderer (Hugo > “Blackfriday”) to not mangle the expander input under a p tag which ruins using css sibling selector used target the show/hide content
Rendered Markdown Demo…
Expando Heading
- bullet
- bullet
- another expander
- nested content that will be expanded
Not an original idea … just boiling it down for my specific usage
For the record, it’s not valid html to apply :before/after psuedo elements to form elements like <input> because they’re not technically “content” (stack-o reference), bummer… webkit (chrome, safari) actually do render directly on <input> but firefox & explorer don’t… oh well, it’s not much more to rely on one more element right after <input>… i’m using the <i> tag as popularized by font-awesome but this is arbitrary.