строки таблицы шаблона django не сворачиваются

Я не могу понять, что я делаю неправильно с обрушением определенных строк моей таблицы.

Можете ли вы совет, как я могу исправить это, чтобы я мог свернуть строки, отмеченные красным цветом ?

Я думаю, что я разместил тег collapse в неправильном месте или не использовал снова ? Как использовать таблицу в таблице ?

мой шаблон:

{% extends "base.html" %}
{% block content %}

    <h3><a href="">{% for project in projects %}{{ project.project_name }}{% endfor %}</a></h3>

    <table class="table table-striped table table-bordered table table-hover table table-condensed">
        <tr>
        <td></td>
        <!-- row with zone names -->
        {% for z in zones %}
            <td style="width:40px" align="center">{{ z.zone_name }}</td>
        {% endfor %}
        </tr>

        <!-- rows with stage names -->
        {% for trstage in trstages %}
            <tr>
                <td style="width:40px"><a data-toggle="collapse" href="#collapse{{ trstage }}">{{ trstage.stage_name }}</a></td>
                <!--  row with stage value  -->
                {% for stage in trstage.stages %}
                        {% for zone in zones|dictsort:"zone_name" %}
                            {% if zone == stage.zone %}
                                <td style="width:40px" align="center">{{ stage.substage_sum.sum }}</td>
                            {% endif %}
                        {% endfor %}
                {% endfor %}
            </tr>
            <div id="collapse{{ trstage }}" class="panel-collapse collapse">
                <!-- rows with substages names -->
                {% for trsubstage in trstage.related_trsubstages %}
                <tr>
                    <td>{{ trsubstage.substage_name }}</td>
                <!-- row with substage value -->
                {% for substage in trsubstage.substages_related %}
                    {% for zone in zones %}
                        {% if zone == substage.stage.zone %}
                        <td style="width:40px" align="center">{{ substage.substage_value }}</td>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
                </tr>
                {% endfor %}
            </div>
        {% endfor %}
    </table>
{% endblock %}

Ниже приведена ссылка на мой текущий шаблон:
Введите описание изображения здесь

1 ответ

  1. Попробуйте добавить идентификатор trstage в href и id divs. Я сделал что-то похожее в своем проекте, и это сработало. Я надеюсь, что это сработает и для вас. Вроде этого,

    <div id="{{ trstage.id.value }}" class="panel-collapse collapse"> 
    

    и

    <a data-toggle="collapse" href="#{{ trstage.id.value }}">{{ trstage.stage_name }}