# DiscoTOC - automatic table of contents

**URL:** https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143
**Category:** Theme component
**Tags:** official, disco-toc
**Created:** [9 maart 2019 om 05:36 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143 "2019-03-09T05:36:22Z")
**Posts on this page:** 20
**Page:** 5

<div class="post-metadata">

### Author: ![topological](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@topological](https://meta.discourse.org/u/topological)
#### Post date: [8 april 2022 om 07:10 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/354 "2022-04-08T07:10:27Z")

</div>

I am using DiscoTOC for a long time, and it works fine with Chinese headings until recent update.

If there are multiple Chinese headings (including no ascii characters) in the post, it will only navigate to the first heading of one level when the navigation item on the right side is clicked. I believe this is because the DiscoTOC generates navigation items with the same id (because the headings are all in Chinese). So, the query selector will only find the first heading.

As a try, I forked the GitHub repo and pushed a little commit as  
[https://github.com/ShuiyuanSJTU/DiscoTOC/commit/54b12e937718fe7cb4156cba202f1adb2597edf3](https://github.com/ShuiyuanSJTU/DiscoTOC/commit/54b12e937718fe7cb4156cba202f1adb2597edf3)

It seems to work in my site. If it looks good to you team, I can raise a pull request, or this bug need to be fixed in another way.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [1 mei 2022 om 20:34 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/355 "2022-05-01T20:34:18Z")

</div>

Thanks @topological 🙂 I’ve moved your bug report over to the DisoTOC topic itself to hopefully get it in front of the right people. 👍

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [5 mei 2022 om 18:33 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/356 "2022-05-05T18:33:54Z")

</div>

Thanks for the report and the PR. As noted in the PR, I have implemented a [different fix](https://github.com/discourse/DiscoTOC/pull/36), that doesn’t rely on headings having anchors as children.

(I’m happy to merge the translations in your PR, though.)

---

<div class="post-metadata">

### Author: ![Awesome\_E](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Awesome\_E](https://meta.discourse.org/u/Awesome_E)
#### Post date: [7 mei 2022 om 05:35 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/357 "2022-05-07T05:35:31Z")

</div>

First off, this is a super helpful theme component for long posts!

However, there’s an issue with this theme component on mobile devices (at least on iOS). When I open a large table of contents, scrolling through the TOC doesn’t work on mobile like it does on a desktop.

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/3/7/f375ddaff2b864b3c799514ca135cf022e4555a5.png)  
The list contains Headings A-H, but I can’t scroll through it

The list appears to be scrollable, but a touchstart event prevents the list from being scrolled. Disabling the touch start event listener for the `d-toc` element seems to solve the issue.

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/d/1/fd12a1e7b7edfaea381145f9dc84d378354af880.jpeg)

* * *

I can’t see the version of the theme component we have on our forum, nor can I test this on a local install (since I can’t load it on a phone). So, if there is a fix I’m not aware of or if there’s anything I should, please let me know.

Thanks in advance 🙂

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7 mei 2022 om 21:55 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/358 "2022-05-07T21:55:25Z")

</div>

Thanks for the report, the screenshots were particularly helpful in tracking down the issue. This is a problem that comes from core, one of the parent elements of the DiscoTOC mobile UI disables scrolling of its children, and this affected DiscoTOC. Should be fixed via [FIX: Limit pan event handler to fix scrolling in TOC by pmusaraj · Pull Request #16673 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/16673) (it’ll likely be merged early next week).

---

<div class="post-metadata">

### Author: ![jerry0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jerry0/32/94523_2.png) [@jerry0](https://meta.discourse.org/u/jerry0)
#### Post date: [8 mei 2022 om 13:03 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/359 "2022-05-08T13:03:47Z")

</div>

> [@simonk](#):
>
> After a full rebuild, I can confirm that the ToC appears correctly on the discourse-docs page - thanks a lot

Is this still working?

@pmusaraj I guess it’s possible that I haven’t set this correctly but I have installed the theme and the TOC I set up on a topic is not appearing on the discourse-docs version but it is appearing in the main topic

---

<div class="post-metadata">

### Author: ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@simonk](https://meta.discourse.org/u/simonk)
#### Post date: [9 mei 2022 om 08:51 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/360 "2022-05-09T08:51:46Z")

</div>

Hmm, I agree, the ToC seems not to be appearing in discourse-docs pages again. For example:

[https://meta.discourse.org/docs?ascending=false&category=53&tags=themes&topic=91966](https://meta.discourse.org/docs?ascending=false&category=53&tags=themes&topic=91966)

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/3/2/1325f13db91e85f1f2b04f3f5989d6429d8362aa.png)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [9 mei 2022 om 19:06 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/361 "2022-05-09T19:06:58Z")

</div>

The mobile scrolling issue fix is now merged. I also added a compatibility fix for the discourse Docs view, you can see it in action [here on meta](https://meta.discourse.org/docs?topic=93648).

---

<div class="post-metadata">

### Author: ![mksafi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mksafi/32/244062_2.png) [@mksafi](https://meta.discourse.org/u/mksafi)
#### Post date: [19 mei 2022 om 16:15 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/364 "2022-05-19T16:15:26Z")

</div>

If you prefer to have the table of content always fully expanded, try adding this CSS to your theme

```css
#d-toc li.d-toc-item > ul {
  max-height: 500em !important;
  overflow: visible !important;
  opacity: 1 !important;
}

```

---

<div class="post-metadata">

### Author: ![Awesome\_E](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Awesome\_E](https://meta.discourse.org/u/Awesome_E)
#### Post date: [23 mei 2022 om 21:48 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/367 "2022-05-23T21:48:34Z")

</div>

Can confirm that’s been fixed as well 👍

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [16 oktober 2023 om 07:37 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/368 "2023-10-16T07:37:46Z")

</div>

5 posts were split to a new topic: [When ToC present, I lose access to the topic wrench?](https://meta.discourse.org/t/when-toc-present-i-lose-access-to-the-topic-wrench/282327)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [11 december 2023 om 17:54 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/421 "2023-12-11T17:54:54Z")

</div>

The next time you update DiscoTOC you’ll probably notice that we’ve added a button to toggle between the topic timeline and the table of contents… let us know if you encounter any issues or have feedback about this new feature!

 ![Screenshot 2023-10-25 at 12.09.21 PM](https://global.discourse-cdn.com/meta/original/4X/1/d/e/1de95a5597e28f546ad58cb55bce8cbf8e8ce7af.png)

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [11 december 2023 om 17:57 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/422 "2023-12-11T17:57:59Z")

</div>

I love it! 😻

Did just have to refresh my browser to see it in this topic, because it’s that shiny and new! 💖

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [26 maart 2024 om 13:49 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/432 "2024-03-26T13:49:05Z")

</div>

I’ve just made a minor update to this theme that ignores the trust level requirement for staff accounts, this more closely follows how Discourse’s settings behave.

---

<div class="post-metadata">

### Author: ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [7 mei 2024 om 21:21 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/433 "2024-05-07T21:21:31Z")

</div>

this component works nicely for the first post, thanks for this nice one…

wonder if possible to do the autoTOC for the posts below as well… that seems a common case when try to document something using one post and comments below…  
say, when browsing to the main post or replies below, if the post/reply has titles/subtitles defined, it auto shows its TOC, otherwise shows the default timeline thing…

I did not read this long thread, did a quick search, seems not discussed…

thanks…

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [7 mei 2024 om 21:35 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/434 "2024-05-07T21:35:15Z")

</div>

> [@Disco TOC for replies](https://meta.discourse.org/t/disco-toc-for-replies/217885/5):
>
> Update: The changes in this fork have been merged upstream, please use the official theme components instead For anyone who wants to apply DiscoTOC in their replies, I did this part of the work in my own fork! Now it can apply TOC to any post and it works fine, just like it does on the OP. It seems that the official team doesn’t think it’s necessary to apply DiscoTOC in the replies, so I won’t open a pull request. But you can use my modified version! [https://github.com/Lhcfl/DiscoTOC-edi…](https://github.com/Lhcfl/DiscoTOC-edited)

---

<div class="post-metadata">

### Author: ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [7 mei 2024 om 22:01 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/436 "2024-05-07T22:01:06Z")

</div>

another question

somehow, I don’t see the button to switch between content and TOC  
the same using the official disco-toc or @Moin 's forked version…  
is there a setting for this? seems not… hmm…  
my system is on discourse 3.2.1

someone could give a hint? thanks…

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/3/e/53e11cbe5fdf89c31169160ffab060a758c6a44d.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/d/d/2/dd2941fd73405225a7a9ce58af0fab979e44f639.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7 mei 2024 om 22:28 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/437 "2024-05-07T22:28:55Z")

</div>

> [@fbpbdmin](#):
>
> my system is on discourse 3.2.1

you need to update Discourse, the feature required some Discourse updates

---

<div class="post-metadata">

### Author: ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [7 mei 2024 om 22:30 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/438 "2024-05-07T22:30:09Z")

</div>

> [@awesomerobot](#):
>
> you need to update Discourse

hmm, seems 3.2.1 is the current release, right ?

update to beta ?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [8 mei 2024 om 13:57 UTC](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/439 "2024-05-08T13:57:16Z")

</div>

Yes, major versions have a much slower release schedule, so you may be waiting months for new features and security updates otherwise — by default we recommend staying up to date with our beta releases. Some more info here: [Understanding Discourse release channels](https://meta.discourse.org/t/why-does-discourse-always-install-beta-versions-by-default/264400)

[Previous page](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143.md?page=4)

[Next page](https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143.md?page=6)
