DiscoTOC style is connected to the .with-topic-progress class which is added to .topic-navigation if there are more than 1 post in the topic. So without reply the DiscoTOC style will broke.
I think TOC should also be active if there is no reply in a topic because it doesn’t related with the reply counts. On desktop it works fine topics with no reply too.
I’ve just run into this here too. (iPhone/Safari) It’d be great if this could be fixed. Scrolling to the bottom of a long doc to get to the toc is a bit cumbersome.
This seems to be working just fine even without a reply.
Again, I’m no expert, I’m just a good “asker” and after a little bit of “back and forth” with ChatGPT with the right questions and challenges, it seems to be working.
If anyone who is an expert in JavaScript and CSS wants to improve it, please share.
So, if you want:
The text “Table of Contents” next to the icon
Expanded headings
Sticky button without relying on any replies, the full CSS is this:
/* expands all headings in table of content sidebar */
#d-toc li.d-toc-item > ul {
max-height: 500em !important;
overflow: visible !important;
opacity: 1 !important;
}
@media screen and (max-width: 767px) {
/* makes the wrapper including the table of contents button, sticky to the bottom */
#topic-progress-wrapper.sticky-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
/* add "table ot contents" to the button after the icon */
.d-toc-mini button::after {
content: "Table of Contents";
margin-left: 5px;
font-size: 14px;
vertical-align: middle;
}
}
This is great thanks, but I think we can make it with only CSS too. We just have to use the same CSS on .topic-navigation which used on .with-topic-progress. The missing .with-topic-progress class is blocking the style if there is no reply in the topic.