<div class="custom-categories"> {% if not simple_list_page %} {% set my_posts = blog_recent_posts('group.id', limit=4) %} {% set my_topics = blog_topics('group.id', 8) %} <ul> <li class="tab-all"> <a href="{{ group.absolute_url }}">All</a> </li> {% for item in my_topics %} <li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li> {% endfor %} </ul> {% endif %} </div> $(function(){ var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); $('.custom-categories ul li a').each(function(){ var url = $(this).attr('href'); var lastSegment = url.split('/').pop(); if (lastSegment == value1) { $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); } }); }); //================= topics with active in label <div class="dropdown"> <label class="dropdown__label"> <span> Filter </span> <i class="fas fa-arrow-down"></i> </label> <div class="custom-categories"> {% if not simple_list_page %} {% set my_topics = blog_topics('group.id', 8) %} <ul> {% for item in my_topics %} <li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li> {% endfor %} </ul> {% endif %} </div> </div> //====================== Js $(function () { var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); $('.custom-categories ul li a').each(function () { var url = $(this).attr('href'); var lastSegment = url.split('/').pop(); if (lastSegment == value1) { if( $(this).html() == 'All' ){ $('.dropdown__label span').html('Filter'); } else { $('.dropdown__label span').html($(this).html()); } } }); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter