I would like to implement that on my sidebar dropdowns but Liquid being pretty new to me, I don't seem to find a way to do it.

On JS I would have a for loop closing all the items that contains the 'open' class for example then add that class to the single item.

I wish I add tried more but I feel like I don't have the 'Liquid logic' yet..

                  <a href="{{ link.url }}"
                    class="mobile-nav__link mobile-nav__link--top-level"
                    id="Label-{{ child_list_handle }}"
                    {% if link.active %}data-active="true"{% endif %}>
                    {{ link.title }}
                  </a>
                  <div class="mobile-nav__toggle">
                    <button type="button"
                      aria-controls="Linklist-{{ child_list_handle }}"
                      {% if link.active or link.child_active %}aria-open="true"{% endif %}
                      class="collapsible-trigger collapsible--auto-height {% if link.active or link.child_active %}is-open{% endif %}">
                      {% include 'collapsible-icons' %}
                    </button>

The interesting parts are the {% if link.active %}

First, I'm not sure what's setting link.active to true, Then I also don't know how I would select these dropdowns element to use them in a loop.

Now what I would like to do is to have a for loop that would set link.active to false on all dropdowns and then setting it to true on the single element.

You don't have to give me the total answer, just a way for me to figure out how to select all the elements and what causes link.active to be true.

Thanks in advance.

picture of said dropdowns