How To Auto-Collapse TOC Boxes

I’m writing this article in response to a question I’ve got recently, the answer to which I believe will be of general interest.

And the question is:

How to make automatically collapsed TOC boxes.

Once more I take pride in having made the right design choices. In this case, it’s the choice to heavily build on CSS, and include a class parameter in the TOC box to specify extra CSS classes, that enables an easy answer:

1. Edit your stylesheet, and add the following clause:

div.toc.auto-collapse ul {
	display: none;
}

2. Supply “auto-collapse” with the toc shortcode, like in toc class=auto-collapse or toc class=”toc-right auto-collapse”.

And there your go.

Some notes:

• In step #2, note the quotes in the second example. They are needed to supply more than one CSS class.
• If you want all your TOC boxes to be auto-collapsed, remove the “.auto-collapse” from the clause in step #1, and skip step #2.

Update: The TOC Boxes Demo Page contains an example auto-collapsed TOC box.

Related posts:

• Table Of Contents In The Sidebar
• Spam Blocking Technologies – A Quick Glance
• Sliding Notes Lessons – Beware of HTML Tags In Title
• How To Couple a TOC Box to an Image
• YouTube Inside A Sliding Note