Liquid: use dynamic variable for aria-expanded attribute

Viewed 194

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!

0 Answers
Related