title: toggle aria attribute on each item
body: <p>I have a show hide activity that I am trying to toggle several aria attributes on. In the example code below I have used one attribute to show what I want to achieve. The toggle works but it applies to all the .hideMe' classes and not on each one.</p>
  
  <p>The function I am trying to get is that only the expanded tab has aria-expanded="true" and the others false. Then when I click another tab that tab changes to true and the rest false.</p>
  
  <pre><code>&lt;div id="interactive_folder_01" aria-live="polite"&gt;
              &lt;span class="folder_02"&gt;&lt;/span&gt;
              &lt;div class="theWhiteBit"&gt;&lt;/div&gt;
              &lt;button tabindex="0" data-id="01" class="legend_icon icon_01 tab""&gt;Question 1&lt;/button&gt;
              &lt;button tabindex="0" data-id="02" class="legend_icon icon_02 tab"&gt;Question 2&lt;/button&gt;
              &lt;button tabindex="0" data-id="03" class="legend_icon icon_03 tab"&gt;Question 3&lt;/button&gt;
              &lt;button tabindex="0" data-id="04" class="legend_icon icon_04 tab"&gt;Question 4&lt;/button&gt;
              &lt;button tabindex="0" data-id="05" class="legend_icon icon_05 tab"&gt;Question 5&lt;/button&gt;
  
               &lt;div class="cte_01 hideMe" style="display: none;" aria-expanded="false"&gt; 
               &lt;p&gt;&lt;strong&gt;Answer 1&lt;/strong&gt;&lt;/p&gt;
                     &lt;p&gt;Content&lt;/p&gt;
                          &lt;/div&gt;
  
              &lt;div class="cte_02 hideMe" style="display: block;" aria-expanded="false"&gt;
              &lt;p&gt;&lt;strong&gt;Answer 2&lt;/strong&gt;&lt;/p&gt;
               &lt;p&gt;Content&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="cte_03 hideMe" style="display: none;" aria-expanded="false"&gt;
              &lt;p&gt;&lt;strong&gt;Answer 3&lt;/strong&gt;&lt;/p&gt;
                   &lt;p&gt;Content&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="cte_04 hideMe" style="display: none;" aria-expanded="false"&gt;
  &lt;p&gt;&lt;strong&gt;Answer 4&lt;/strong&gt;&lt;/p&gt;
              &lt;p&gt;content&lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cte_05 hideMe" style="display: none;" aria-expanded="false"&gt;
  &lt;p&gt;&lt;strong&gt;Answer 5&lt;/strong&gt;&lt;/p&gt;
                   &lt;p&gt;Content&lt;/p&gt;
              &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>JS. This code hides all:</p>
  
  <pre><code>var hideus = $('.hideMe');
  
  $(hideus).hide();
  $('.folder_info_01 , .cte_01').show();
  
  $('.tab').on('click', function(e) {
    e.preventDefault();
  
    var $this = $(this),
      suffix = $this.data('id');
  
    $('#interactive_folder_01 span').removeClass().addClass('folder_' + suffix);
  
    $(hideus).hide();
    $('img.folder_info_' + suffix + ' , .cte_' + suffix).show();
  
    $('.hideMe').each(function() {
      $(this).attr('aria-expanded', function(i, attr) {
        return attr == 'true' ? 'false' : 'true'
      });
  
    });
  
  });
  </code></pre>