Передача переменной Django в атрибут аккордеона в HTML

Я новичок в Django и заранее извиняюсь за столь элементарный для большинства из вас вопрос, но я искал похожие вопросы повсюду и не встретил работоспособного решения.

Я пытаюсь создать Bootstrap Accordion для каждого элемента цикла Django for-loop. Таким образом, отображается список элементов, и когда вы нажимаете на один элемент, описание этого элемента сворачивается, чтобы показать. В настоящее время сегмент выглядит следующим образом, используя этот шаблон:

<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>

Теперь, это дает одинаковое значение (collapseOne) для data-bs-toggle, aria-controls и id класса accordion-collapse(collapsing element) для каждого элемента цикла for-loop, в результате чего все элементы аккордеона сворачиваются при нажатии на один из них, хотя я хочу, чтобы сворачивался только тот, на который нажали.

Поэтому я попытался передать переменную Django в таком виде:

  1. {{ item }} in place of collapseOne
  2. {{ forloop.counter }} in place of collapseOne

Аккордеон по-прежнему отображается, но не сворачивается при нажатии.

Есть ли способ передать переменную Django в атрибуты accordion-item? Или какое-либо другое решение?

Буду признателен за ваш совет.

Вы должны быть в состоянии использовать {{ forloop.counter }} - просто убедитесь, что обновляете значение везде, где вам нужно:

{% 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 %}
Вернуться на верх