<div class="sidenav">
        {% for sub_cat in sub_cats %}
                <button class="dropdown-btn"> {{ sub_cat.sub_cat_title }}
                        <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-container">
                        {% for subsub_cat in sub_cat.subsubcategory_set.all %}
                            {% url 'tutorials:tutorials' subsub_cat.subsub_cat_parent.sub_cat_parent.cat_slug subsub_cat.subsub_cat_parent.sub_cat_slug subsub_cat.subsub_cat_slug as tutorial_link %}

                            <a href="{{ tutorial_link }}" class="{% if request.path == tutorial_link %}working{% endif %}" >{{ subsub_cat.subsub_cat_title }}</a>
                        {% endfor %}
                </div>
        {% endfor %}
</div>

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;

        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}