title: How do I use Python Django variables in my JS code?
body: <p>I'm trying to make a vertical side navigation bar populated with categories (dynamic, fetched from django models) where each category has sub-categories (also dynamic and fetched from models). When I refer to classes in my JS code, the code works i.e., upon clicking of a category, the sub-menu consisting of its respective subcategory opens up. But the problem is, when I click on any of the categories, all of them expand to reveal all their sub-categories. I just want one, which is clicked on, to open and stay open.</p>
  
  <p>My HTML:</p>
  
  <pre><code>{% block body %}&lt;div class="col-md-12 col-xs-12 body-container leftsidenavigator" style="margin-top:15px;"&gt;
      &lt;div class="col-md-12 col-xs-12 leftsidenavigator-inner" style="padding:0px;"&gt;
          &lt;h2&gt;&lt;center&gt;Categories&lt;/center&gt;&lt;/h2&gt;
              &lt;ul class="catindexlist catlistcat nav-collapse89"&gt;
                  {% for category in catindexlisted %}
                      &lt;li class="catindexlistitem category-name" style="font-weight:600;padding-right:20px;"&gt;&lt;a href="" id="category-name{{category.name}}"&gt;{{category.name}}&lt;/a&gt;&lt;/li&gt;
                      &lt;ul style="padding:0px;" class="nav-collapse88"&gt;
                          {% for forum in category|forumindexlistbycat %}
                              &lt;li class="catlistforum forum-name" id="{{category.name}}{{forum.name}}" style="padding-right:10px;"&gt;&lt;a href="{{ forum.get_absolute_url }}"&gt;{{forum.name}}&lt;/a&gt;&lt;/li&gt;
                          {% endfor %}&lt;/ul&gt;
                  {% endfor %}
              &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;{% endblock %}
  </code></pre>
  
  <p>My non-ideal but working Javascript:</p>
  
  <pre><code>$(function() {
     $(".catlistforum").hide();
     $(".category-name a").click(function(e) {
       e.preventDefault();
       $(".catlistforum").slideToggle();
       if(!($(this).parent('li').parent('div').siblings('div').children('ul').children('div').is(":visible"))){
              $(this).parent('li').parent('div').siblings('div').children('ul').children('div').is(":visible").slideToggle();
       }});
   })
  </code></pre>
  
  <p>This is what appears in the console of chrome dev tools:
  <a href="https://i.stack.imgur.com/CIeWQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CIeWQ.png" alt="enter image description here"></a></p>
  
  <p>I need something like this to work:</p>
  
  <pre><code>$(function() {
     $(".catlistforum").hide();
     $(".category-name a").click(function(e) {
       e.preventDefault();
       $(".catlistforum").slideToggle();
       if(!($(this).parent('li').siblings('div').children('ul').children('div').is(":visible"))){
              $(this).parent('li').siblings('div').children('ul').children('div').is(":visible").slideToggle();
       }});
   })
  </code></pre>
  
  <p>This code, when I click on any category, reloads the page and no sub-menu is shown. Please keep in mind that I've used for loops, so the final HTML will have several categories with each having several sub-categories. </p>
  
  <p>How can I refer to IDs dynamically generated by Django? Is this a placement issue of where I place my script in the page-because, through the chain of <code>% extends %</code> and <code>% includes %</code>, this script comes with other scripts at the bottom of the page, after my footer is rendered. What am I missing here?</p>