Why is this not working?

Highlighted
New Member
4 0 0

I am trying to set active class for the parent if any of the sublinks are active.

<ul class="collection-menu">
  {% for link in linklists.collection-menu.links %}

  {% assign parent_link_active = false %}

  {% for child_link in link.links %}
    {% if child_link.active %}
      {% assign parent_link_active = true %}
    {% endif %}
  {% endfor %}

  <li class="{{ link.title }}" {% if parent_link_active %}class="expanded"{% endif %}>
  {% if link.links != blank %}
    <span class="js-link-expand" {% if link.active %}class="active"{% endif %}>
      {{ link.title }}
      <span class="link-expand-icon">
        {% include 'icon-chevron-down' %}
      </span>
    </span>
    <ul class="collection-menu--child">
        {% for child_link in link.links %}  
          <li>
            <a href= "{{ child_link.url }}" {% if child_link.active %}class="active"{% endif %}>
              {{ child_link.title }}
            </a> 
            {% if child_link.links != blank %}
              <ul class="collection-menu--grandchild">
              {% for grandchild_link in child_link.links %}  
                <li>
                  <a href= "{{ grandchild_link.url }}" {% if grandchild_link.active %}class="active"{% endif %}>
                    {{ grandchild_link.title }}
                  </a>
                </li>
              {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endfor %}
      </ul> 
  {% else %}
      <a href="{{ link.url }}"{% if link.active %}class="active"{% endif %}>
        {{ link.title }}
      </a>                        
  {% endif %}
    </li>
  {% endfor %}
</ul> 
0 Likes