I want the toc to be initially all unfolded without any animation effects.

[jeongHwarr]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Built from jekyll-theme-chirpy

Description

Currently, toc is unfolded and sub-items appear only when the corresponding part is being read.
However, I want all items to be unfolded initially.
What should I do? Thank you!

Operations you have already tried

I don't know..

Anything else?

No response

[kungfux]

It's a good question and this is doable.

Create a file _javascript\modules\components\toc.js with the following content to override default TOC bot configuration:

export function toc() {
    if (document.querySelector('main h2, main h3')) {
      // see: https://github.com/tscanlin/tocbot#usage
      tocbot.init({
        tocSelector: '#toc',
        contentSelector: '.content',
        ignoreSelector: '[data-toc-skip]',
        headingSelector: 'h2, h3, h4',
        orderedList: false,
        scrollSmooth: false,
        collapseDepth: 6,
      });
    }
  }

collapseDepth is the setting you are looking for:

// How many heading levels should not be collapsed.
// For example, number 6 will show everything since
// there are only 6 heading levels and number 0 will collapse them all.
// The sections that are hidden will open
// and close as you scroll to headings within them.
collapseDepth: 0,

There are many more settings available, check them out here.

[jeongHwarr]

@kungfux Oh.. It is really awesome!! Thank you for your reply 😀 This is exactly what I wanted. Thank you so much!!!

[kungfux]

You're welcome 🤗

[jeongHwarr]

@kungfux

I'm having trouble applying it 😭
It works as I want in the local environment, but the changes are not applied to the github page.

This is the code I modified.
https://github.com/jeongHwarr/jeongHwarr.github.io/blob/1b829f25fc72679040458a6bb13a9ca1ca1f4175/_javascript/modules/components/toc.js#L1C1-L14C2

Even though all processes were successful in Actions, it is not applied. Do you know why?
(https://github.com/jeongHwarr/jeongHwarr.github.io/actions/runs/8338159974)

This is my blog address!
https://jeonghwarr.github.io/posts/lumiere_a_space_time_diffusion_model_for_video_generation/

[kungfux]

@jeongHwarr I assume this is because you have committed files in assets/js/dist for some reason that normally should build by CI action. And one of the file you have there is assets/js/dist/post.min.js containing unmodified configuration for TOC that takes an action on your production. I would suggest you to try to remove assets/js/dist folder completely from the repo and try.

[jeongHwarr]

@kungfux Thank you so so so much!! When I removed the file in assets/js/dist, toc disappeared. So I rebuilt the project in my local environment and pushed the files to assets/js/dist. When I did that, it worked as I wanted. Thank you so much for your help. 👍😀👍 Hope you have a nice day!

[kungfux]

I'm glad to hear you have sorted out things @jeongHwarr 🎉 Have a great day too 😊

Feel free to mark the discussion as answered.