Soy novato en Django y me disculpo de antemano por una pregunta tan básica para la mayoría de ustedes, pero busqué preguntas similares por todas partes y no encontré una solución viable.
Estoy tratando de crear un acordeón Bootstrap para cada elemento de un bucle for de Django. Entonces, se muestra una lista de elementos, y cuando hace clic en un elemento, la descripción del mismo se colapsará para mostrarse. El segmento actualmente se ve así usando esta plantilla :
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </head> <body> {% for item in items %} <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-parent="#accordion" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> {{ item }} </button> </h2> <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> {{ item.description }} </div> </div> </div> </div> </body> Ahora, esto está dando el mismo valor ( collapseOne ) a data-bs-toggle , aria-controls e id de la clase de accordion-collapse (elemento colapsado) para cada elemento del bucle for, lo que hace que todos los elementos del acordeón se colapsen cuando uno de ellos se hace clic, aunque solo quiero que se colapse el que se hizo clic.
Entonces traté de pasar la variable Django como tal:
{{ item }} en lugar de collapseOne{{ forloop.counter }} en lugar de collapseOneEl acordeón todavía se muestra, pero no se contrae cuando se hace clic.
¿Hay alguna forma de pasar una variable de Django a los atributos del elemento de acordeón? ¿O cualquier otro trabajo alrededor?
Agradecería tu consejo.
Debería poder usar el {{ forloop.counter }} - solo asegúrese de actualizar el valor donde lo necesite:
{% for item in items %} <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="heading-{{ forloop.counter }}"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-parent="#accordion" data-bs-target="#collapse-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapse-{{ forloop.counter }}"> {{ item }} </button> </h2> <div id="collapse-{{ forloop.counter }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ forloop.counter }}" data-bs-parent="#accordionExample"> <div class="accordion-body"> {{ item.description }} </div> </div> </div> </div> {% endfor %}