loop through elements -add ids and attributes fro aria

by ian_smithz

HTML

<ul class="n accordion">
  <li class="ac__item ac__item--open">
    <h3 class="ac__title no-top-border">
								Can I return something even if it’s not faulty?<span class="icon-minus"></span><span class="icon-plus"></span>
							</h3>
    <div class="ac__body">
      <p>Yes, within 30 days of purchase and as long as the items are returned unused and in a saleable condition complete with their original packaging and any promotional items associated to the purchase. Certain items are excluded from our ‘unwanted’
        items return policy (see below), these are marked as such online and in the catalogue.</p>
    </div>
  </li>
  <li class="ac__item">
    <h3 class="ac__title">
								Can I return something to store even if I didn’t buy it at that particular store?<span class="icon-minus"></span><span class="icon-plus"></span>
							</h3>
    <div class="ac__body">
      <p>Yes, unless the item has been delivered direct from our supplier (see below). Whether you bought the item in another Screwfix store or you ordered online or over the phone and had it delivered, you can take it back to any of our stores – this is
        the quickest way to process your return.</p>
    </div>
  </li>
  <li class="ac__item">
    <h3 class="ac__title">
								I can’t return the item to a store easily, what should I do?<span class="icon-minus"></span><span class="icon-plus"></span>
							</h3>
    <div class="ac__body">
      <p>If there is not a <a href="/jsp/tradeCounter/tradeCounterPage.jsp">store near you</a> or you are unable to return a particular item to a store, you can return it from any post office. Please note certain items CANNOT be returned via the post office,
        this includes items:</p>
      <ul>
        <li>over 1m in length</li>
        <li>over 2kg in weight</li>
        <li>powered by lithium batteries</li>
      </ul>
      <p>You will need to complete this <a href="/images/help/ReturnsFormOct2015.pdf">returns form</a> and print off a returns label....

CSS

ul.accordion {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5
}

.ac__item {
  position: relative;
  padding-right: 10px
}

.ac__item .icon-r-dir,
.ac__item:first-child .ac__body,
.ac__item:first-child .ac__body_alt {
  display: block
}

.ac__item .icon-plus {
  position: absolute;
  right: 4px;
  top: 15px;
  display: block
}

.ac__item .icon-down-dir,
.ac__item.ac__item--open .icon-r-dir {
  display: none
}

@media only screen and (min-width: 40.063em) {
  .ac__item .icon-plus {
    font-size: 18px
  }
}

@media only screen and (max-width: 40em) {
  .ac__item .icon-plus {
    font-size: 15px
  }
}

.ac__item .icon-minus {
  position: absolute;
  right: 4px;
  top: 15px;
  display: none
}

@media only screen and (min-width: 40.063em) {
  .ac__item .icon-minus {
    font-size: 18px
  }
}

@media only screen and (max-width: 40em) {
  .ac__item .icon-minus {
    font-size: 15px
  }
}

.ac__item.ac__item--open .icon-down-dir {
  display: block
}

.ac__item.ac__item--open .icon-plus {
  display: none
}

@media only screen and (min-width: 40.063em) {
  .ac__item.ac__item--open .icon-plus {
    font-size: 18px
  }
}

@media only screen and (max-width: 40em) {
  .ac__item.ac__item--open .icon-plus {
    font-size: 15px
  }
}

.ac__item.ac__item--open .icon-minus {
  display: block
}

@media only screen and (min-width: 40.063em) {
  .ac__item.ac__item--open .icon-minus {
    font-size: 18px
  }
}

@media only screen and (max-width: 40em) {
  .ac__item.ac__item--open .icon-minus {
    font-size: 15px
  }
}

.ac__title,
.ac__title_alt {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  cursor: pointer
}

.ac__title_alt {
  background: #3e74a6;
  color: #FFF;
  padding: 4px 10px;
  border-bottom: 1px solid #FFF
}

.ac__title {
  background: #fff;
  line-height: 17px;
  color: #0053a0;
  padding: 15px 25px 15px 0;
  border-top: 1px solid #e5e5e5
}

.infobox,
.infobox .infobox__text a {
  color:...

JavaScript

/* ///////////////////////////////////////// */
/* SET UP ARIA ATTRIBUTES / ROLES / TABINDEX */
/* ///////////////////////////////////////// */

$(".accordion").attr({
  'role': 'tablist',
  'aria-multiselectable': 'false'
});

// add ids and accessibility attributes to accordion titles
$(".ac__title").each(function(i) {
  $(this).attr({
    'id': 'ac__title-' + (i + 1),
    'aria-controls': 'ac__content-' + (i + 1),
    'aria-expanded': 'false',
    'aria-selected': 'false',
    'role': 'tab',
    'tabindex': '0'
  });
});

// add ids and accessibility attributes to accordion body
$(".ac__body").each(function(i) {
  $(this).attr({
    'id': 'ac__content-' + (i + 1),
    'aria-labelledby': 'ac__title-' + (i + 1),
    'aria-hidden': 'true',
    'role': 'tabpanel',
    'tabindex': '-1'
  });
});

// As the first question is currently styled as open - swap the aria values
$(".ac__item--open .ac__title").attr({
  'aria-expanded': 'true',
  'aria-selected': 'true',
});
$(".ac__item--open .ac__body").attr({
  'aria-hidden': 'false'
});

/* ///////////////////////////////////////// */
/*          MAIN ACCORDION FUNCTION          */
/* ///////////////////////////////////////// */

var genericAccordion = function() {

  var thisSwitch = $(this),
    thisParent = $(thisSwitch).parents('.accordion'),
    thisItem = $(thisSwitch).parent(),
    thisBody = $(thisSwitch).siblings($('[class^="ac__body"]'));

  if ($(thisItem).hasClass('ac__item--open')) {

    $(thisBody).slideToggle('fast');
    $(thisItem).removeClass('ac__item--open');

    $(thisBody).attr('aria-hidden', 'true');
    $(thisSwitch).attr({
      "aria-expanded": "false",
      "aria-selected": "false"
    });

  } else if (!$(thisItem).hasClass('ac__item--open')) {

    $(thisParent).find('.ac__item--open').removeClass('ac__item--open').find($('[class^="ac__body"]')).slideToggle('fast');

    // update all ac__title aria attributes except for the one you selected
    $(thisParent).find('.ac__title').attr({
   ...