Why is are the bootstrap rows not collapsing/expanding?

Question

I have a table that displays nested data. The data looks something as follows:

Objective 1
    Objective 1.1
        Objective 1.1.1
    Objective 1.2
        Objective 1.2.1
Objective 2

The data is to be displayed in a table as follows:

The requirement is that, when clicking on Objective 1, that the child rows (Objective 1.1 and Objective 1.2) appear. Then, when either Objective 1.1 or Objective 1.2 is clicked, that the relevant grandchild row appears (Objective 1.1 --> Objective 1.1.1).

I use Python, Flask and Bootstrap for this project, and I want to perform this task purely in Bootstrap if possible.

My current HTML is as follows:

<table class="table">
<thead>
<tr>
    <th>Primary Objectives</th>
    <th>Secondary Objectives</th>
    <th>Tertiary Objectives</th>
    <th>Editing Tools</th>
</tr>
</thead>

<tbody>
{% for node in all_nodes %}
<tr class="clickable" data-toggle="collapse" id="{{ node[0][1] }}" data-target=".{{ node[0][1] }}collapsed">
    <!-- objective tree -->
    <td class="text-left">{{ node[0][0] }}</td>
    <td class="text-left"></td>
    <td class="text-left"></td>

    <!-- Editing tools -->
    <td><a href="/edit/{{ node[0][1] }}" class="fa fa-edit"
           title="Edit Objective"></a>
        <div class="fa fa-circle-thin"></div>
        <a href="/deleteobjective/{{ node[0][1] }}" class="fa fa-exclamation-triangle"
           title="Delete User"></a>
    </td>
</tr>
{% for node2 in node[1] %}
<tr class="clickable collapse out {{ node[0][1] }}collapsed" id="{{ node2[0][1] }}" data-toggle="collapse"
    data-target=".{{ node2[0][1] }}collapsed">
    <!-- objective tree -->
    <td class="text-left"></td>
    <td class="text-left">{{ node2[0][0] }}</td>
    <td class="text-left"></td>

    <!-- Editing tools -->
    <td><a href="/edit/{{ node2[0][1] }}" class="fa fa-edit"
           title="Edit Objective"></a>
        <div class="fa fa-circle-thin"></div>
        <a href="/deleteobjective/{{ node2[0][1] }}" class="fa fa-exclamation-triangle"
           title="Delete User"></a>
    </td>
</tr>
{% for node3 in node2[1] %}
<tr class="collapse out {{ node2[0][1] }}collapsed">
    <!-- objective tree -->
    <td class="text-left"></td>
    <td class="text-left"></td>
    <td class="text-left">{{ node3[0] }}</td>

    <!-- Editing tools -->
    <td><a href="/edit/{{ node3[1] }}" class="fa fa-edit"
           title="Edit Objective"></a>
        <div class="fa fa-circle-thin"></div>
        <a href="/deleteobjective/{{ node3[1] }}" class="fa fa-exclamation-triangle"
           title="Delete User"></a>
    </td>
</tr>
{% endfor %}
{% endfor %}
{% endfor %}
</tbody>

The table displays correctly and my code works when clicking Objective 1, but when clicking Objective 1.1 or Objective 1.2 the grandchild rows do not expand.

Please help!

Answer 1

When printing HTML for the Objective XX, you have:

data-target="#.{{ node2[0][1] }}collapsed"

but you should have

data-target=".{{ node2[0][1] }}collapsed"

The selector is not finding the element to collapse.

Hope it works after fixing this :D

Answer 2

Ok, so after hours of head scratching I found the problem!

The program generates unique id numbers for each row that relates to the next row's data-target, using the given objective's unique code. The data-target is expressed as:

data-target=".{{ node[0][1] }}collapsed"

The resulting HTML looks like this:

 <tr class="clickable collapse out obj1collapsed" id="obj1.1"
                data-toggle="collapse"
                data-target=".obj1.1collapsed">

Notice that second period in the data-target? That is what caused the problem! When I removed it the program worked beautifully!