Toggle an element's attribute with jQuery?

Question

Building a tree menu with jQuery, and I want it to be accessible, so I'm using aria attributes. What I want to do is toggle the "aria-expanded" attribute from true to false on click/enter. I've tried this, but it's obviously not correct:

$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );

Answer 1

You can use .attr() to manually write the toggle logic

$(this).closest('ul').find('> li.tree-parent').attr('aria-expanded', function (i, attr) {
    return attr == 'true' ? 'false' : 'true'
});

Answer 2

This element changes class based on click. aria-expanded value mentioned is after click

$("#navbar-btn-icon").click(function(e) {
  var menuItem = $(this);

  if (menuItem.attr("aria-expanded") === "true") {
    $("span.navbar-toggler-icon").addClass('clicked');
  }
  else if (menuItem.attr("aria-expanded") === "false") {
    $("span.navbar-toggler-icon").removeClass('clicked');
  }

});