-1

I'm trying to build a html template as part of a Django project. It would contain dynamic accordions (number of such accordions determined by the value passed to it from views.py) and the content within each would also be dynamically passed from views.py (I haven't even built this part yet).

I've tried Googling but always end up with one of two scenarios. One where all the accordion buttons open/close only the first accordion. Two, none of the accordion buttons work. Ideally, all accordion buttons should work and they each need to open/close its own content. I'm guessing the issue lies in dynamically referring to the div that contains the content. But I'm unable to get a fix.

Please help!

Code:

<div class="container">
  <h2>Mock Tests</h2>
  <p>Click the category you wish to view.</p>
  @{int i=0;}
  {% for s in sections %}
  <div class="panel-group" id="accordion_@i">
    <div class="panel panel-default" id="panel_@i">
      <div class="panel-heading">
        <h4 class="panel-title">
          <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseone_@i" href="#collapseOne_@i">{{ s.s_name }}</button>
        </h4>
      </div>
      <div id="collapseOne_@i" class="panel-collapse collapse in">
        <div class="panel-body">{{ s.s_name }}</div>
      </div>
    </div>
  </div>
  i++;
    {% endfor %}
  </div>

Modified code:

{% block body %}
<div class="container">
  <h2>Mock Tests</h2>
  <p>Click the category you wish to view.</p>

  <div class="panel-group" id="accordion">
    {% for s in sections %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <button type="button" class="btn btn-info" data-parent="#accordion" data-toggle="collapse" data-target="accordion_{{ forloop.counter }}" href="accordion_{{ forloop.counter }}">{{ s.s_name }}</button>
        </h4>
      </div>
      <div id="accordion_{{ forloop.counter }}" class="panel-collapse collapse in">
        <div class="panel-body">{{ s.s_name }}</div>
      </div>
    </div>
  {% endfor %}
  </div>    
  </div>
Dr Confuse
  • 605
  • 1
  • 7
  • 24
  • Possible duplicate: [Numeric for loop in Django templates](http://stackoverflow.com/q/1107737/1324033) – Sayse Jun 30 '16 at 08:27
  • You seem to be randomly trying to use syntax from completely different template systems in Django. You need to actually read the docs, and use Django's syntax. – Daniel Roseman Jun 30 '16 at 08:29
  • @Sayse that's not a good duplicate; all the OP needs is `forloop.counter`. – Daniel Roseman Jun 30 '16 at 08:30
  • @DanielRoseman - Yeah I wrote that comment before I actually considered its usage (note thats not what it it has been voted to close against). I included it since that appears to be what the op is doing with their I variable – Sayse Jun 30 '16 at 08:30
  • @DR - I actually started with a single code but tried syntax from anything helpful that I found online and I honestly, dont see the point in putting up the original syntax because it itself wasnt working and the structure & logic is largely the same. I added that i variable as i tried doing gleaning something useful from this post: https://stackoverflow.com/questions/30613968/bootstrap-collapse-within-a-foreach-loop If its not too much trouble, could you show me the right syntax please? – Dr Confuse Jun 30 '16 at 08:41
  • That question has nothing to do with Django. Why did you think it was at all relevant? And Sayse has shown you the correct code. – Daniel Roseman Jun 30 '16 at 08:45
  • _/\_ TBH, I'm a total newbie to web development/coding in general. Two weeks ago, I hadn't even heard of Django and didn't know one word in python or html. I'm trying Sayse's code and its still not working. Thats why I asked. – Dr Confuse Jun 30 '16 at 08:59

1 Answers1

1

I don't know what the @{int i=0;} is supposed to be doing, but you either need to use a for loop and look up a section using the index of that, or you can use the forloop counter, or just give the id's a better name

id="accordion_{{ forloop.counter }}"
id="accordion_{{ forloop.counter0 }}"
id="accordion_{{ s.s_name }}"

Any should suffice.

Sayse
  • 42,633
  • 14
  • 77
  • 146
  • Hi Sayse, I've tried using the id you suggested. The rendering shows all of them as expanded and none of them contract as it should. Could you tell me what I've done wrong here? – Dr Confuse Jun 30 '16 at 09:06
  • I've written up the latest as modified code in the question. – Dr Confuse Jun 30 '16 at 09:07