HOW TO DISPLAY THE COLLAPSED DATA IN CARD using django and bootstrap

I have a django project that includes cards where each card contains a collapse that will hide or show the data. 

Problem is once i do a **foreach loop** the cards appear but the collapse is not working and doesn't display any data.

I used the below steps:

create function in views.py

============================

    def displaydata(request,pk):

    c = cursor.execute('SELECT ID,Nickname_,Date_of_Birth FROM Person_ WHERE ID = pk ')

    print("c ===>",c)

    return redirect("search")

    return render(request,"displaydata.html",{"c":c})

create URL in urls.py

==========

     path("displaydata/<int:pk>/",displaydata,name = "displaydata")

create a template that display the cards 

=========

      <div class="container">

        <div class="row justify-content-center">

        {% for obj in object_list %}

        

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-5">

       

        <div class="p-2 my-flex-item">

        <div class="card innercardzoom">

        <div class="inner">

        <img src="{% static '/img/card/1.png'%}" class="card-img-top" alt="...">

        </div>

        <h5 class="card-header">

            <a class="collapsed d-block" data-toggle="collapse" href="{% url 'displaydata' pk=obj.0 %}" aria-expanded="true" data-target = "#table-collapsed" caller-id ="" aria-controls="collapse-collapsed" id="heading-collapsed{{obj.0}">

                <i class="fa fa-chevron-down pull-right"></i>

                     Details

               

                <script type="text/javascript">

               

                $(document).on('click','.collapsed d-block',function(){

                $('#heading-collapsed').attr('caller-id',$(this).attr('id'));

                });

                </script>

        

        

                </a>

 

create a template that display the **collapsed data**

=============

      {% for row in c %}

    <div id="table-collapsed" class="collapse" aria-labelledby="heading-collapsed">

    <table class="card-body table-sm table table-hover text-right">

        <tbody>

            <tr>

                <td>NICKNAME</td>

                <td>{{ row.1 }}</td>

            </tr> 

            <tr>

                <td>DOB</td>

                <td>{{ row.2 }}</td>

            </tr> 

        </tbody>

    </table>

    </div>

   

    {% endfor %}

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/4e300433-1840-4f00-9e88-2109d9da625d%40googlegroups.com.