title: Jquery: Show / Hide Divs that are created by python for loop
body: <p>I am trying to show some dynamically generated graphs on a single page, and then hide them until a user wants to see them.  </p>
  
  <p>What I want to happen is when the div named 'Show_When_Closed' is clicked hide that div and show the divs named 'Show_When_Open' and 'Graph' and then when 'Show_When_Open' is clicked hide it and 'Graph' and show 'Show_When_Closed.'The for loop will run X amount of times, so the html code will be repeated multiple times. </p>
  
  <p>My code below does not work as it uses Css tags and not dynamic ids or some Jquery way of the code knowning which div to show. I am sure there is a simple way of achieving the task but my javascript is very poor.</p>
  
  <p>Thanks to anyone who helps. </p>
  
  <pre><code>{% for value in graphs_to_render %}
    &lt;div class='graph_holder' id=maindivs&gt;
        &lt;div class='graph_header_1' name='Show_When_Closed'&gt; {{value}} &lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;div class='graph_header_2' name='Show_When_Open' style='display:none;'&gt; {{value}} &lt;i class="fas fa-chevron-down"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;div name='Graph' class= 'graph_main' style='display:none;' &gt;
         &lt;embed type="image/svg+xml" src= {{graphs_to_render[value]|safe}} /&gt;
        &lt;/div&gt;
      &lt;/input&gt;
    &lt;/div&gt;
  {% endfor %}
  
  &lt;script&gt;
  $(document).ready(function() {
    $('.graph_header_1').on('click', function(){
      $('.graph_main').toggle();
      $('.graph_header_1').toggle();
      $('.graph_header_2').toggle();
    });
    $('.graph_header_2').on('click', function(){
      $('.graph_main').toggle();
      $('.graph_header_1').toggle();
      $('.graph_header_2').toggle();
    });
  });
  </code></pre>
  
  <p></p>