title: jQuery change aria-expanded attribute depending on its value
body: <p>I have an item that I want to change aria-expanded attribute depending on the current state. </p>
  
  <p>It changes OK to true, but for some reason doesn't change to false on the second click:</p>
  
  <p>html</p>
  
  <pre><code> &lt;li aria-expanded=false&gt;hey&lt;/li&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$("li").on("click", function(e) {
       var menuItem = $(e.currentTarget);
  
       if (menuItem.attr("aria-expanded") == true) {
            $(this).attr("aria-expanded", false);
       } else {
            $(this).attr("aria-expanded", true);
       }
       return false;
  });
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/jLYRpg" rel="nofollow noreferrer">https://codepen.io/anon/pen/jLYRpg</a></p>