[clac1]

Hello

Has anyone implemented a collapsible table of contents?
On some articles, my table of contents is long and I would like it to be collapsible by default.
Thanks in advance for your help!

[seb_oi]

I have one implemented that is quite easy to edit. You can copy it from my website.

https://opinioneselectronicas.com/monitor-lg-ultragear-24gn600-b-opiniones-review/

[clac1]

Thanks a lot for your answer! I’m sorry, but I’m not comfortable enough with the code… Would you be so kind as to send me the modifications to be made in Publii and the files to be added or updated?
Thank you very much in advance!

<p class=”simple-translate-result” dir=”auto”></p>
<p class=”simple-translate-candidate” dir=”auto”></p>

[seb_oi]

clac1 wrote:

Thanks a lot for your answer! I’m sorry, but I’m not comfortable enough with the code… Would you be so kind as to send me the modifications to be made in Publii and the files to be added or updated?

Thank you very much in advance!

<p class=”simple-translate-result” dir=”auto”></p>

<p class=”simple-translate-candidate” dir=”auto”></p>

Sorry for the delay, I don’t have much time lately.

Actually it is a temporary fix that I have to finish modifying in these days (I will try to publish a definitive solution here).
To use it first create the table of contents and then you have to modify the h3 that is created (<h3>Table of Contents</h3>) by a Summary (<summary>Table of content</summary>.

If you update the table you have the h3 will be rewritten and you will have to replace it with a summary again.

These are the css styles that I use:

.post__toc{
border-color: #2c2e35;
border-width: 1px;
border-style: double;
padding: 0.5rem;
}

I hope it helps you at least temporarily, cheers.

[clac1]

Thank you very much for responding to me despite your workload.
I put the css code in the Custon CSS part of Tools & Plugins.
I replaced <h3>Table of Contents</h3> by <summary>Table of content</summary>.
But it doesn’t work and the summary markups disappear.
I must have to define summary somewhere, but where…? ?
I hope you can help me a little bit more.
Thanks again!

<p class=”simple-translate-result” dir=”auto”></p>
<p class=”simple-translate-candidate” dir=”auto”></p>

[itips3727]

@clac1

Below is a working example of the code:

<details>
<summary>Table of Contents Summary</summary>

TOC item 1 link
TOC item 2 link
TOC item 3 link
Etc.

</details>

 

The #mcetoc_… entries will be unique to your page(s).

[clac1]

I thank you very much for your help and patience, it works perfectly.

[Author]

Posts