Within my HTML template, I have a collection of categories and subcategories. Each category can contain anywhere from 0 to n subcategories.
I am currently displaying these using nested for loops:
Category 1
Subcategory 1
Subcategory 2
Category 2
Subcategory 3
Subcategory 4
Subcategory 5
Additionally, I have drop-down menus specific to each category and subcategory.
Despite my efforts, I cannot get the drop-downs to remain on the same line as the corresponding category or subcategory. Here is how they currently appear:
Category 1
menu
Subcategory 1
menu
Subcategory 2
menu
Category 2
menu
Subcategory 3
menu
Subcategory 4
menu
Subcategory 5
menu
Category 3
menu
To achieve the desired layout - with drop-downs aligned in the same row as their respective category or subcategory - with fixed offsets, the structure should resemble this:
Category 1 menu
Subcategory 1 menu
Subcategory 2 menu
Category 2 menu
Subcategory 3 menu
Subcategory 4 menu
Subcategory 5 menu
Category 3 menu
The provided HTML showcases this dynamic:
<div class="well">
<div style="overflow-y: scroll; overflow-x: hidden; height: 500px;">
<ul class="nav nav-list">
{% for category in page_category %}
<li><label class="tree-toggler nav-header">Category:{{ category.name }}
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog">Options</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li> <a href="{% url 'subcategory_new' pk=category.id %}">Create subcategory</a></li>
<li> <a href="{% url 'subcategory_new' pk=category.id %}">Delete</a></li>
<li> <a href="{% url 'subcategory_new' pk=category.id %}">Edit</a></li>
</ul>
</div>
</label>
<ul class="nav nav-list tree">
<lh>Sub Category</lh>
{% for field in category.subcategory_set.all %}
<li>#{{ field.id }} {{ field.name }} - {{ field.description }} {{ field.keywords }}
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog">Options</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li><a href="{% url 'subcategory_new' pk=category.id %}">Create subcategory</a></li>
<li><a href="{% url 'company_new' %}">Delete</a></li>
</ul>
</div>
</ul>
</li> <li class="divider"></li><!--category li closing-->
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
</div>
The script used to toggle visibility is as follows:
$(document).ready(function () {
$('label.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
});
If you have any alternative design ideas, suggestions, or recommendations, please feel free to share them. I am utilizing the Django Framework alongside Bootstrap and JQuery for this project.