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!