title: How to addClass and removeClass to child element when aria true or false?
body: <p>I'm using the <a href="http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html" rel="nofollow">dropdown button by Zurb Foundation 5</a> with font awesome and the idea is to rotate the font when the menu is visible, and rotate it back once its hidden.</p>
  
  <p>Zurb foundation 5 does not use class open on the element so hasClass doesn't work, instead it uses Aria and since hasAria doesn't exist I've tried to use some solutions that sadly don't work in one way or more. What I'm trying to do is add the class <code>fa-rotate-90</code> to the font element <code>&lt;i&gt;</code> when the parent <code>.wf-burger</code> is <code>aria-expanded = true</code> and remove it when <code>aria-expanded = false</code>.</p>
  
  <p><em>Here is my rather simple HTML code:</em> </p>
  
  <pre><code>&lt;h1&gt;
      &lt;a aria-expanded="false" aria-controls="drop1" data-dropdown="drop1" href="#" class="wf-burger"&gt;
          &lt;i aria-hidden="true" class="fa fa-bars fa-rotate-90"&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/h1&gt; 
  &lt;ul aria-hidden="true" class="f-dropdown" id="drop1" data-dropdown-content&gt;
      &lt;li&gt;&lt;a title="Link 1" href="#1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Link 2" href="#2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Link 3" href="#3"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Link 4" href="#4"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Link 5" href="#5"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><em>This code works but doesn't remove the class once the aria is false:</em></p>
  
  <pre><code>(function($) {
      var attr = $('.wf-burger').attr('aria-expanded');
      if (typeof attr !== typeof undefined &amp;&amp; attr !== false) {
              $('.fa.fa-bars').addClass('fa-rotate-90');
      }
      if (typeof attr !== typeof undefined &amp;&amp; attr !== true) {
          $('.fa.fa-bars').removeClass('fa-rotate-90');
      }
  })(jQuery);
  </code></pre>
  
  <p><em>This code didn't work at all:</em></p>
  
  <pre><code>(function($) {
      if ($('.wf-burger').attr('aria-expanded') === 'true') {
          $('.fa.fa-bars').addClass('fa-rotate-90');
      }
      if ($('.wf-burger').attr('aria-expanded') === 'false') {
          $('.fa.fa-bars').removeClass('fa-rotate-90');
      }
  })(jQuery);
  </code></pre>