Jquery: Show / Hide Divs that are created by python for loop

Question

I am trying to show some dynamically generated graphs on a single page, and then hide them until a user wants to see them.

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.

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.

Thanks to anyone who helps.

{% for value in graphs_to_render %}
  <div class='graph_holder' id=maindivs>
      <div class='graph_header_1' name='Show_When_Closed'> {{value}} <i class="fas fa-chevron-right"></i></div>
      <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value}} <i class="fas fa-chevron-down"></i></div>
      <div name='Graph' class= 'graph_main' style='display:none;' >
       <embed type="image/svg+xml" src= {{graphs_to_render[value]|safe}} />
      </div>
    </input>
  </div>
{% endfor %}

<script>
$(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();
  });
});

You can also use the toggleclass method: https://api.jquery.com/toggleclass/ Then you can use transitions with css too. — NoNickAvailable, Jul 23 '19 at 07:37

score 0 · Accepted Answer · answered Jul 23 '19 at 07:39

Select the elements relative to the clicked element

$(document).ready(function() {
  $('.graph_header_1,.graph_header_2').on('click', function() {
    $(this).parent().find('.graph_main,.graph_header_1,.graph_header_2').toggle();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> Show_When_Closed<i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> Show_When_Open<i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
  Graph
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
</div>
<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> Show_When_Closed<i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> Show_When_Open<i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
  Graph
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
</div>

Thank you, I assumed it would be this simple. Really should get around to learning some JQuerry. — KirkmanJ, Jul 23 '19 at 08:00

score -1 · Answer 2 · answered Jul 23 '19 at 07:34

-1

You can use the attribute selector.

Basically it should look something like this:

$("div[name=Show_When_Closed]").on("click", function(){
  $("div[name=Show_When_Closed]").hide(); //hide the divs whose name are Show_When_Closed
  $("div[name=Show_When_Open]").show();  //show the divs whose name are Show_When_Open
});

answered Jul 23 '19 at 07:34

ErgiS

223
2
10

also some more info [here](https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery) about the name selector – ErgiS Jul 23 '19 at 07:36
This wont work if there is more than 1 iteration of that set. Clicking closed will open all of the graphs, not just the 1 graph associated in that graph holder group. – Zze Jul 23 '19 at 07:38

score -1 · Answer 3 · answered Jul 23 '19 at 07:39

Below is a working example in plain html, but the important part is the javascript.

It looks at the containing parent and then contextually to that will show the applicable Show_When_Open div.

$(document).ready(function() {
  $("[name=Show_When_Closed]").click(function(){
      $(this).parents(".graph_holder").find("[name=Show_When_Open]").show();
      $(this).hide();
  });
  
  $("[name=Show_When_Open]").click(function(){
      $(this).parents(".graph_holder").find("[name=Show_When_Closed]").show();
      $(this).hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> {{value - graph_header_1}} <i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value - graph_header_2}} <i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
  </input>
</div>

<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> {{value - graph_header_1}} <i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value - graph_header_2}} <i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
  </input>
</div>

<div class='graph_holder' id=maindivs>
  <div class='graph_header_1' name='Show_When_Closed'> {{value - graph_header_1}} <i class="fas fa-chevron-right"></i></div>
  <div class='graph_header_2' name='Show_When_Open' style='display:none;'> {{value - graph_header_2}} <i class="fas fa-chevron-down"></i></div>
  <div name='Graph' class='graph_main' style='display:none;'>
    <embed type="image/svg+xml" src={ {graphs_to_render[value]|safe}} />
  </div>
  </input>
</div>

Jquery: Show / Hide Divs that are created by python for loop

3 Answers3