CODEWITHSUNDEEP
shopifyliquid
NBash
NBash

Reputation: 515

Liquid: use dynamic variable for aria-expanded attribute

I have a liquid page with the tag . This is an element of the drop-down menu so it may expand. For that purpose, I want to add aria-expanded attribute.

Scenario - user hovers the menu-item: aria-expanded=true, on blur aria-expanded=false. aria-expanded should be dynamic.

My snippet:

<li>
  {% assign menuExpanded = false %}
  <a class="ch-wp-menu-item-link" 
    href="{{item.value}}"
    onclick="return cityHiveMenuItemLinkClicked(event)"
    onmouseover={% assign menuExpanded = true %}
    onblur="{{menuExpanded = false}}"
    aria-expanded="{{menuExpanded}}">
    My menu item
  </a>
</li>

The issue I faced is that I can't just use the <script> tag, create a variable there, and then use it in the template itself.

What could be a solution here? Thank you!

Upvotes: 2

Views: 871

Answers (1)

Ignicious Xavier
Ignicious Xavier

Reputation: 11

Add the following line of code instead, it worked for me. attr.aria-expanded="{{menuExpanded}}"

Upvotes: 1

Related Questions