How to only show heading if the toc has items in it

[steveparks]

Hi

Thanks for the really useful, and simple to set up, addon.

I've set it up in my template as follows:

<div class="contents">
    {{ partial:typography/h3 content="On this page" }}
    <ol class="mt-2 mb-4 list-circle list-inside space-y-2 text-xs">
        {{ toc depth="3" }}
        <li>
        <a href="#{{ toc_id }}" class="hover:text-jellybean" >{{ toc_title }}</a>
        {{ if children }}
        <ol>
            {{ *recursive children* }}
        </ol>
        {{ /if }}
        </li>
        {{ /toc }}
    </ol>
</div>

But of course, that means the div and the heading are shown on the page, even if there are no items in the toc.

So I tried the usual way of handling this:

{{ toc depth="3" as="page_toc" }}
<div class="contents">
    {{ partial:typography/h3 content="On this page" class="text-left text-sm tracking-wide uppercase {{ text_colour }}" color="{{ text_colour }}" }}
    <ol class="mt-2 mb-4 list-circle list-inside space-y-2 text-xs">
        {{ page_toc depth="3" }}
        <li>
        <a href="#{{ toc_id }}" class="hover:text-jellybean" >{{ toc_title }}</a>
        {{ if children }}
        <ol>
            {{ *recursive children* }}
        </ol>
        {{ /if }}
        </li>
        {{ /page_toc }}
    </ol>
</div>
{{ /toc }}

But that gives me an error 'Call to a member function count() on array'

The error is the same whether depth="3' is placed in the toc or page_toc tag.

What is the right way to approach this with statmic-toc please?

Thanks for any help

[goldnead]

Hey @steveparks,

Sorry if I'm too late to answer your question.

So you want to display the toc only if headings are present on the page? I guess you could insert a simple if-statemen with the variable no_results.

<div class="contents">
    {{ partial:typography/h3 content="On this page" }}
    <ol class="mt-2 mb-4 list-circle list-inside space-y-2 text-xs">
        {{ toc depth="3" }}
          {{ if no_results }}
            {{# do stuff, when noc headings are present #}}
          {{ else }}
            <li>
            <a href="#{{ toc_id }}" class="hover:text-jellybean" >{{ toc_title }}</a>
            {{ if children }}
            <ol>
                {{ *recursive children* }}
            </ol>
            {{ /if }}
            </li>
          {{ /if }}
        {{ /toc }}
    </ol>
</div>

I hope, that helps.

[steveparks]

Thanks for the reply.

What I'm trying to do is to not show the whole block, including the <h3> heading, if there are no entries in the toc.

Because at the moment if there are no entries in the toc, it shows a heading 'on this page' but then shows nothing below it.

Thanks

[goldnead]

Ah sorry, now I understand.

You could simply wrap the content using an if statement and the toc:count Tag:

{{ if {toc:count} > 0 }}
  {{# Show stuff, if headings are present #}}
  ...
{{ /if }}

I just noticed, that this tag isn't properly documented. My fault, sorry! I am going to update the docs asap.

[goldnead]

Docs updated with latest commit https://github.com/goldnead/statamic-toc/commit/2436fc95cb8317727e7196275b8e62e6ffeaa693