The Framework Code

File List

{% macro accordion(id, tabs, carets = FALSE) %}
    {% import '@content/iconmacro.twig' as fa %}
    <div class="accordion" id="{{id}}">
        {% for t in tabs %}
            <div class="accordion-item">
                <h2 class="accordion-header" id="{{t.id}}">
                    <button class="accordion-button{% if not t.open %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#col{{t.id}}" aria-expanded="true" aria-controls="col{{t.id}}">
                        {{t.title}}
                    </button>
                </h2>
                <div id="col{{t.id}}" class="accordion-collapse{% if not t.open %}  collapse{% endif %}" aria-labelledby="{{t.id}}" data-bs-parent="#{{id}}">
                    <div class="accordion-body">
                        {% if t.with is defined %}
                            {% include t.file with t.with%}
                        {% else %}
                            {% include t.file%}
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endmacro accordion %}

{% macro caretJS(id) %}
    const v{{id}} = document.getElementById('{{id}}');
    v{{id}}.addEventListener('show.bs.collapse', function(e){
        let ch = e.target.closest('.card');
        fwdom.toggleClass(ch.querySelectorAll('.fa-caret-right'), ['fa-caret-right', 'fa-caret-down']);
    });
    v{{id}}.addEventListener('hide.bs.collapse', function(e) {
        let ch = e.target.closest('.card');
        fwdom.toggleClass(ch.querySelectorAll('.fa-caret-down'), ['fa-caret-right', 'fa-caret-down']);
    });
{% endmacro caretJS %}