toggle aria attribute on each item
<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>