How do I use Python Django variables in my JS code?
<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="http://i.stack.imgur.com/CIeWQ.png" rel="nofollow"><img src="http://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>

<p>I'm not sure to have understood perfectly as 3 things bother me in your code :</p>

<ol>
<li>In both your lists, you use a 'div' between a 'ul' and a 'li'. I'm not sure if it is correct / can cause issues. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul</a></li>
<li>In your first Jquery code, you use the function child(), did you mean children() ?</li>
<li>In your first Jquery code, I don't understand the 'if' statement. I may have read it too quickly but it seems to me that it says : "If no unrelated sub-menu is visible, then slideToggle all unrelated and visible sub-menus". Not sure if it's my mistake or not.</li>
</ol>

<p>But if I understand what you want to do (display the sub-menu of the clicked category, and hide all others), based on your html structure (regardless of my issue nÂº1, then) I think this would work (once again : based on your html structure) :</p>

<pre><code>    $(function() {
      $(".catlistforum").hide();
        $(".category-name a").click(function(e) {
          e.preventDefault();
          $(".nav-collapse88").hide();
          $(this).parent('li').parent('div').next('.nav-collapse88').show();
        });
     })
</code></pre>

<p>Personnally I would change the Html structure to quit the 'divs' mentionned above. You could maybe use a 'li' for each category, containing two 'divs' : one with class 'catindexlistitem' for the displayed item, and one - hidden with class 'nav-collapse88' - for the submenu. Here again in Javascript you could use the same steps as above : hide all '.nav-collapse' and show only the one next to the clicked item. </p>

<p>Hope it helps, good luck</p>

javascript jquery python html django