Smooth opening of "tc-table-of-contents"

#1

Hello,
I tried to open “Hello There” as smooth as eg. “Impact on tiddlyWiki” with the code:

<style>
.tc-table-of-contents { transition: max-height 600ms ease-in-out; }
</style>

It doesn’t work - what’s wrong or missing?

grafik
grafik1585×1101 109 KB

Thanks for feedback,
Stefan

#2

For Jeremy’s “Hire the founder” content, each of the collapsed items is initially rendered, but are hidden by using max-height:0; so they aren’t visible. When an item (e.g., “Impact on TiddlyWiki”) is clicked, the hidden content is shown by setting max-height:auto;. This allows the smooth opening using CSS transitions.

In contrast, the branches of the “selective expandable” TableOfContents are not rendered until they are actually opened, rather than being initially rendered but hidden. This is done because the TOC macros use recursion, and rendering the entire tree can be VERY expensive (e.g., the TiddlyWiki.com TableOfContents contains 1000s of items).

-e

1 Like
#3

Eric, thanks for your feedback and explanation.