How Do I Add `active` Class For My Current List Group?

This is a sample of my current list-group: Since Python Flow Control link on side bar is active, I want it to be highlighted by adding a CSS active class. I think I can do that u

Solution 1:

I added {% if request.path == '/{{sub_cat.sub_cat_parent.cat_slug}}/{{sub_cat.sub_cat_slug}}/' %} active {% endif %} to check if the current URL matches with url of the current clicked link and if it matches add css active class. However, this had no effect. It didn't throw any error and didn't work either.

Of course not, cf my answer to your (almost duplicate) other question.

edit: I tried this, it didn't work either

{% url '{{request.path}}' category='python' sub_cat='python-introduction' as target %}

{% if target %}

Of course not. First because the first argument to {% url %} is the url's name, not request.path - which you should know since it's already in your original snippet:

<a href="{% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug %}"class="list-group-item list-group-item-action">

and then because {% if target %} only tests the boolean value of target.

The simple obvious answer is:

<div class="list-group">
{% for sub_cat in sub_cats %}
    {% url 'tutorials:tutorials' sub_cat.sub_cat_parent.cat_slug sub_cat.sub_cat_slug as sub_cat_url %}
    <a href="{{ sub_cat_url }}"class="list-group-item list-group-item-action {% if request.path==sub_cat_url %} active {% endif %}">
    {{ sub_cat.sub_cat_title }}</a>
{% endfor %}
</div>