After a recent post having a lot of headings and being almost unusable on mobile, I realised the table of contents should be collapsible!

This uses the amazing <details> element and worked straight away, all it needed was a bit of CSS tidying to line things up.

The feature is enabled by default, and can be disabled with table_of_contents_collapsible: false in _config.yml.

Here’s how they look expanded and shrunk, I’ve also added some example headers to this post to try it yourself:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Header 7

Header 8

Header 9