Table of Contents

Attributes
1

Is it possible to have the Table of Contents wrapper be conditional based on whether there are any Heading elements in inside of the “Contents”?

I am adding the Table of Contents to a Template page, and sometimes the “Content” rich text field has Heading elements present and sometimes it does not. When there are no Heading elements the TOC wrapper and initial “Example H2” link still show.

Thank you,

1 Like
2

Hey @edrock! I’m afraid there is no such functionality at the moment, however, you can always simulate an H2 with the setting option below to avoid the “Example H2” from showing.

Screen Shot 2023-11-20 at 12.22.55
Screen Shot 2023-11-20 at 12.22.552350×990 180 KB

3

Thank you Luis!

I ended up using this as a quick work-around.

<script>
    function hideTocTableIfNoHeadings() {
        const richText = document.querySelector('.rich-text');
        const headings = richText.querySelectorAll('h1, h2, h3, h4, h5, h6');
        const tocTable = document.querySelector('[fs-toc-element="table"]');
        if (headings.length === 0) {
            tocTable.style.display = 'none';
        }
    }
    hideTocTableIfNoHeadings();
</script>
2 Likes
5

Thanks for posting this! Sadly, I tried this (at https://www.digitalfluency.guide/page/causeit-experts-program) but it didn’t seem to work for me. Any suggestions?

6

This is a guess, but WF’s class for RTB’s is .w-richtext, and you actually have quite a few of them on your page. It might be easier to query for the finsweet content attribute instead, something like;

<script>
    function hideTocTableIfNoHeadings() {
        const richText = document.querySelector('[fs-toc-element="contents']'');
        const headings = richText.querySelectorAll('h1, h2, h3, h4, h5, h6');
        const tocTable = document.querySelector('[fs-toc-element="table"]');
        if (headings.length === 0) {
            tocTable.style.display = 'none';
        }
    }
    hideTocTableIfNoHeadings();
</script>
1 Like