October ver 3 demo theme TOC menu

Questions
#1

Hello! I installed the demo data during the October installation, and a demo theme was also installed. It includes wiki pages functionality made with Tailor, and there’s a very convenient display of the Table of Contents (TOC) in the left column. I want to implement the same in my theme. I found where the list is generated and displayed. I copied the code and inserted it into my theme. However, when opening the parent page, all the nested pages are collapsed, and clicking on the triangle on the left does not expand the list. I’ve searched everywhere but couldn’t find where the logic for expanding on click is defined. Please help me figure this out.

{% macro render_toc(articles, activeSlug) %}
    {% for article in articles %}
        {% set hasChildren = article.children %}
        {% set isActive = article.fullslug == activeSlug %}
        <li class="{{ hasChildren ? 'collapsible' }} {{ isActive ? 'active' }}">
            <a href="#tocItem{{ article.id }}" class="collapse-caret {{ not isActive ? 'collapsed' }}" data-bs-toggle="collapse"></a>
            <a class="mb-1 d-block" href="{{ 'wiki/article'|page({ fullslug: article.fullslug, id: article.id }) }}" class="label">{{ article.title }}</a>
            {% if hasChildren %}
                <ul id="tocItem{{ article.id }}" class="collapse {{ isActive ? 'show' }}">
                    {% if article.children %}
                        {{ _self.render_toc(article.children, activeSlug) }}
                    {% endif %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% import _self as nav %}

<ul class="bullet-list">
    {{ nav.render_toc(articles, activeSlug|default(this.param.fullslug|default(''))) }}
</ul>

Here is place where is menu macro

Next place is script

addEventListener('render', function() {

    // Auto Collapsed List
    $('ul.bullet-list li.active:first').each(function() {
        $(this).parents('ul.collapse').each(function() {
            $(this).addClass('show').prevAll('.collapse-caret:first').removeClass('collapsed');
        });
    });

    // Tooltips
    $('[data-bs-toggle="tooltip"]').each(function() {
        $(this).tooltip();
    });

    // Popovers
    $('[data-bs-toggle="popover"]').each(function() {
        var $el = $(this);
        if ($el.data('content-target')) {
            $el
                .popover({ html: true, content: $($el.data('content-target')).get(0) })
                .on('shown.bs.popover', function() {
                    $('input:first', $($el.data('content-target'))).focus();
                })
            ;
        }
        else {
            $el.popover();
        }
    });

    // How it is made
    setTimeout(function() {
        $('.how-its-made').removeClass('init');
    }, 1);

});

But when this i am paste in my scripts not working.

And i can t find where is logic of when klick on ul li item defined

#2

Hey @jaans

Try removing the turbo script. Open this file themes/demo/partials/site/head/head-scripts.htm and update the first line to:

{% framework extras %}

I hope this helps

#3

Hello daft! Can you show me how you build a logic in TOC in to front end

#4

Hey @jaans

Try this

[collection myArticles]
handle = "Page\MyArticle"
==
{% macro render_toc(articles, activeSlug) %}
    {% for article in articles %}
        {% set hasChildren = article.children %}
        {% set isActive = article.fullslug == activeSlug %}
        <li class="{{ hasChildren ? 'collapsible' }} {{ isActive ? 'active' }}">
            <a href="#tocItem{{ article.id }}" class="collapse-caret {{ not isActive ? 'collapsed' }}" data-bs-toggle="collapse"></a>
            <a class="mb-1 d-block" href="{{ 'wiki/article'|page({ fullslug: article.fullslug, id: article.id }) }}" class="label">{{ article.title }}</a>
            {% if hasChildren %}
                <ul id="tocItem{{ article.id }}" class="collapse {{ isActive ? 'show' }}">
                    {% if article.children %}
                        {{ _self.render_toc(article.children, activeSlug) }}
                    {% endif %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% import _self as nav %}
{% set articles = myArticles.getNested() %}

<ul class="bullet-list">
    {{ nav.render_toc(articles, activeSlug|default(this.param.fullslug|default(''))) }}
</ul>
#5

Hello @daft ! This snippet I understand and found an example in the demo template, but I don’t understand how and where the logic is implemented. For example, when clicking on the parent element of the list, the child element expands. Is this logic implemented somewhere in the demo template? Is it native JavaScript or jQuery

#6

This functionality is supplied by Bootstrap (CSS, JavaScript), this part: class="collapse-caret collapsed" data-bs-toggle="collapse"

1 Like
#7

Thanks a lot for information