bootstrap django using collapse within a for loop

问题

I'm iterating through the event_list and want to display info for each entry. But my html only shows the first entry despite whatever entry I click on. i.e If i click on green event it expands the my wedding card-body. I want it to expand separate event details for each separate entry. How do I do that?

index.html

{% extends 'event/eventAdminBase.html' %}
{% load static %}

{% block content %}
{% if event_list %}


{% for events in event_list %}

<div id="accordion">


    <div class="card">

        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                        aria-controls="collapseOne">
                    Event Name :{{ events.event_name }}
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">

                <ul>

                    <li>

                        <p> Event Name :{{ events.event_name }}</p>
                        <p>Venue:${{ events.event_venue }}</p>
                        <p>Type:{{ events.event_type }} </p>
                        <form action="{% url 'event:event-delete' events.id %}" method="post" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-default btn-sm">Delete</button>
                        </form>
                        <form action="{% url 'event:event-update' events.id %}" method="post" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-default btn-sm">Update</button>
                        </form>


                    </li>


                </ul>

            </div>

        </div>

    </div>

</div>

{% endfor %}


{% else %}
<h1>No event entries found on the database.</h1>


{% endif %}

{% endblock %}

This is what i want

urls.py

from django.conf.urls import url

from event import views

app_name = 'event'

urlpatterns = [

    # /event/
    url(r'^$', views.IndexView.as_view(), name='index'),

    # event/event/entry
    url('event/entry/$', views.EventEntry.as_view(), name='event-entry'),

    # event/product/2
    url(r'^event/(?P<pk>[0-9]+)/$', views.EventUpdate.as_view(), name='event-update'),

    # event/product/(?P<pk>[0-9]+)/delete
    url(r'^album/(?P<pk>[0-9]+)/delete$', views.EventDelete.as_view(), name='event-delete'),

]

views.py

from django.views import generic
from django.views.generic.edit import CreateView, UpdateView, DeleteView

from django.urls import reverse_lazy
# Create your views here.
from event.models import Event


# view for the index page
class IndexView(generic.ListView):
    # name of the object to be used in the index.html
    context_object_name = 'event_list'
    template_name = 'event/index.html'

    def get_queryset(self):
        return Event.objects.all()


# view for the event entry page
class EventEntry(CreateView):
    model = Event
    # the fields mentioned below become the entry rows in the generated form
    fields = ['event_name', 'event_venue', 'event_type']


# view for the event update page
class EventUpdate(UpdateView):
    model = Event
    # the fields mentioned beindexlow become the entyr rows in the update form
    fields = ['event_name', 'event_venue', 'event_type']


# view for deleting a event entry
class EventDelete(DeleteView):
    model = Event
    # the delete button forwards to the url mentioned below.
    success_url = reverse_lazy('event:index')

edit : is there any way to manipulate the html with {{ forloop.counter }}?

回答1:

It was a simple solution. The id of the card-body needed to be changed.

{% extends 'event/eventAdminBase.html' %}
{% load static %}

{% block content %}
{% if event_list %}


{% for events in event_list %}

<div id="accordion">


    <div class="card">

        <div class="card-header" id="heading{{ events.id }}">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ events.id }}" aria-expanded="false"
                        aria-controls="collapseOne">
                    Event Name :{{ events.event_name }}
                </button>
            </h5>
        </div>


        <div id="collapse{{ events.id }}" class="collapse " aria-labelledby="heading{{ events.id }}" data-parent="#accordion">
            <div class="card-body">

                <ul>

                    <li>

                        <p> Event Name :{{ events.event_name }}</p>
                        <p> Venue:${{ events.event_venue }}</p>
                        <p> Type:{{ events.event_type }} </p>
                        <form action="{% url 'event:event-delete' events.id %}" method="post" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-default btn-sm">Delete</button>
                        </form>
                        <form action="{% url 'event:event-update' events.id %}" method="post" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-default btn-sm">Update</button>
                        </form>


                    </li>


                </ul>

            </div>

        </div>

    </div>


</div>
{% endfor %}


{% else %}
<h1>No event entries found on the database.</h1>


{% endif %}

{% endblock %}

来源：https://stackoverflow.com/questions/56948630/bootstrap-django-using-collapse-within-a-for-loop