Deepak Mp Deepak Mp - 2 months ago 9
CSS Question

Submenu refuses to open on click

I'm trying to make a left side navigation bar where by-default categories are listed and while clicking on a category, the subcategories are shown under it (in sort expanding sub-menu). I'm working in

Django
and relevant portions of my code are below. When I include the
JS
code, none of the links on the page work and when I exclude it, all the subcategories for all categories are shown by-default. I need only categories to be shown by default and while clicking on any, the respective subcategories be shown. What I'm missing here?

JS CODE: at the bottom of the page, loaded after the footer:

{% block theme_script %}
<script src="{% static " pinax/js/theme.js " %}"></script>
<script>
$(function() {
$(".nav-collapse88").hide();
$(".nav-collapse89 a").click(function(e) {
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
</script>
{% endblock %}


My HTML:
My CATEGORYINDEX.HTML TEMPLATE:

{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}

{% catindexlist as catindexlisted %}

{% block body %}
<div class="col-md-12 col-xs-12 body-container leftsidenavigator" style="margin-top:15px;">
<div class="col-md-12 col-xs-12 leftsidenavigator-inner" style="padding:0px;">
<h2><center>Categories</center></h2>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}</a></li></div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum"><li style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}</a></li></div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}


MY SITE_BASE.HTML:

<div class="col-md-2" style="border-right:solid;text-align:right;height:99%;padding:0 0 0 0px;" id="sidebar"> {% include "categoryindex.html" %} </div>


All who answer will win a magical Pony! Thanks,

Answer

Using the concept of parent siblings you can do that as:

Code Snippet

 $(function() {
   $(".category-name a").parent('li').parent('div').siblings('div').hide();
   $(".category-name a").click(function(e) {
     e.preventDefault();
     $(".category-name a").parent('li').parent('div').siblings('div').slideUp();
     if(!($(this).parent('li').parent('div').siblings('div').is(":visible"))){
     		$(this).parent('li').parent('div').siblings('div').slideToggle();
     }
   });
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="catindexlist catlistcat nav-collapse89">
  {% for category in catindexlisted %}
  <div class="catindexlistitem">
    <li class="category-name" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}01</a></li>
  </div>
  <div class="nav-collapse88">
    <ul style="padding:0px;">
      {% for forum in category|forumindexlistbycat %}
      <div class="catlistforum">
        <li style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}01</a></li>
      </div>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
  {% for category in catindexlisted %}
  <div class="catindexlistitem">
    <li class="category-name" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}02</a></li>
  </div>
  <div class="nav-collapse88">
    <ul style="padding:0px;">
      {% for forum in category|forumindexlistbycat %}
      <div class="catlistforum">
        <li style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}02</a></li>
      </div>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
  {% for category in catindexlisted %}
  <div class="catindexlistitem">
    <li class="category-name" style="font-weight:600;padding-right:20px;"><a href="">{{category.name}}03</a></li>
  </div>
  <div class="nav-collapse88">
    <ul style="padding:0px;">
      {% for forum in category|forumindexlistbycat %}
      <div class="catlistforum">
        <li style="padding-right:10px;"><a href="{{ forum.get_absolute_url }}">{{forum.name}}03</a></li>
      </div>
      {% endfor %}
    </ul>
  </div>
  {% endfor %}
</ul>