I have a table of these collapsible cards with dynamic content in them. The code I have taken from bootstrap looks like this:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Problem

But as you can see, each collapse is controlled by this attribute multiCollapseExample1. In my django template, when I use this, on clicking any of the close button, only the first card collases because it has a static value of 1. How can I give it a dynamic value so every card opens and closes correctly? Reason I am asking is because my code is pretty complicated and is return about 10+ parameters from the views.py function, and I am iterating a dictionary of dictionaries to print all the values in the format I want. For that reason, I have about 4-5 nested for loops, and also an if statement which checks if the if looper counter is same as the parent's loop counter. I am not able to undertand how I can simple solve this problem.

This is my actual full code:

<table class="table mb-0 table-striped loadingplan">
            <thead>
            <tr>
                <th>ID</th>
                <th>Vehicles</th>
                <th>Gross Weight</th>
                <th>Route</th>
                <th>Route Distance</th>
                <th>Route TAT</th>
                <th>ETD</th>
                <th>ETA</th>
                <th></th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for d,t,r,y,w,f in open_route_info %}
                {% for k,v in open_trucks.items %}
                    {% if forloop.counter == forloop.parentloop.counter %}
                        <td class="align-middle">YNT1151<br>
                            <small class="align-right">{{ f }}% Filled</small>
                        </td>
                        <td>
                            {% for x in v %}
                                {% for y,z in x.items %}
                                    {{ y.display_name }}
                                {% endfor %}
                            {% endfor %}
                        </td>

                        {% for truck,value in v.items %}
                            <td class="align-middle">{{ truck }} {{ value }}<br>o
                                <a href="#">
                                    <small>Download Loading Plan {{ value.pk }}</small>
                                </a>
                            </td>
                        {% endfor %}

                        <td class="align-middle">{{ w }}KG</td>
                        <td class="align-middle">{{ k }}</td>
                        <td class="align-middle">{{ d }} KM</td>
                        <td class="align-middle">{{ t }}</td>
                        <td class="align-middle">{{ y }}</td>
                        <td class="align-middle">{{ scheduled_date }}</td>
                        <td class="align-middle">
                            <button class="btn" type="button" data-toggle="collapse"
                                    data-target="#multiCollapseExample2" aria-expanded="false"
                                    aria-controls="multiCollapseExample2"><img
                                    src="{% static 'img/cardopen.svg' %}" alt="card open"></button>
                        </td>
                        <td class="align-middle"><a href="#" class="btn btn-primary">Raise RFQ</a>
                        </td>
                        <tr class="collapse multi-collapse" id="multiCollapseExample2">
                            <td colspan="5">


                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>SKU ID</th>
                                        <th>SKU Name</th>
                                        <th>Quantity</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    {% for x in v %}
                                        {% for y,z in x.items %}
                                            {% for w in z %}
                                                <tr>

                                                    <td>{{ w.name }}</td>
                                                    <td>{{ w.pid }}</td>
                                                    <td>{{ w.quantity }}</td>

                                                </tr>
                                            {% endfor %}

                                        {% endfor %}
                                    {% endfor %}

                                    </tbody>
                                </table>


                            </td>
                            <td colspan="5" class="align-middle">
                                <div class="card card-body iframecard">

                                    <iframe src="{{ r }}"></iframe>


                                </div>
                            </td>
                        </tr>

                    {% endif %}
                {% endfor %}
            {% endfor %}


            </tbody>
        </table>

What I want

All I want to do is, replace multiCollapseExample2 with a dynamic variable which is the same length as the number of items. I tried using a simple loop on a list which has the length as the number of items, but it did not work probably because of the if statement {% if forloop.counter == forloop.parentloop.counter %}.

1 Answers

1
Simen Nielsen On Best Solutions

Looks like you can use the 2 for-loops and their variables to create an unique id for your cards. Something like

data-target="#multiCollapse{{d}}{{t}}{{k}}{{v}}"

Where d,t is from outer for-loop and k,v is from the inner loop.