accessible accordion closed first panel

by ian_smithz

HTML

<script>
  document.addEventListener('DOMContentLoaded', function() {

    // prepare accordion with accessibility attributes, roles and tabindexes
    makeAccordionAccessible();

    // call genericAccordion function when title in accordion is selected
    jQuery('.accordion .ac__title').on('click', genericAccordion);

    //enter key and space bar to expand accordion
    jQuery('.ac__title').on('keydown', function(e) {

      if (e.keyCode === 13 || e.keyCode === 32) {
        e.preventDefault();
        jQuery(this).click();
      }
    });
  });

  var genericAccordion = function() {

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

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

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

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

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

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

      // update all ac__title aria attributes except for the one you selected
      jQuery(thisParent).find('.ac__title').attr({
        "aria-expanded": "false",
        "aria-selected": "false"
      });

      // update all ac__body aria attribute except for the one you selected
      jQuery(thisParent).find('.ac__body').attr('aria-hidden', 'true').css('display', 'none');

      jQuery(thisBody).slideToggle('fast');
      jQuery(thisItem).addClass('ac__item--open');

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

    }
  };

  var...

CSS

/* override sfx.min.css */
.ac__item:first-child .ac__body {
    display: none;
}



/* accordion */

.ac__body {
  border-top: dashed 1px #d1d1d1;
}

.ac__body p {
  margin-bottom: 12px;
  padding-left: 4px;
}

.ac__body ol.no-bullet,
.ac__body ul.no-bullet,
.ac__body_alt ol,
.ac__body_alt ul,
ol.n,
ul.n {
  position: relative;
  padding: 0;
  margin: 0
}

.ac__body ol.no-bullet li,
.ac__body ul.no-bullet li,
.ac__body_alt ol li,
.ac__body_alt ul li,
ol.n li,
ul.n li {
  list-style: none
}

.ac__body {
  position: relative;
  padding: 12px 4px;
  display: none;
  border-bottom: 1px solid #e5e5e5
}

.ac__body ol,
.ac__body ul {
  /*padding-left: 20px;*/
  font-size: 13px;
  line-height: 17px;
}

.ac__body ol li,
.ac__body ul li {
  list-style: disc
}

.ac__body ol.no-bullet li,
.ac__body ul.no-bullet li,
.ac__body_alt ol li,
.ac__body_alt ul li {
  list-style: none;
}

/*.ac__body_alt {
    position: relative;
    padding: 12px 4px;
    display: none
}*/

.ac__title {
  line-height: 17px;
  padding: 15px 25px 15px 4px;
  border-top: 1px solid #e5e5e5;
  margin-bottom: 0;
}

.ac__title:focus {
  background-color: #f6f6f6;
  outline: 0;
}

.ac__title.no-top-border {
  border: 0
}

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

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

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

/*.ac__item:first-child .ac__body,.ac__item:first-child .ac__body_alt {
    display: block
}*/

.ac__item.ac__item--open .ac__body,
.ac__item.ac__item--open .ac__body_alt {
  display: block
}

[class*=" icon-"]:before,
[class^=icon-]:before {
  font-family: font-awesome-custom;
  font-style: normal;
  font-weight: 400;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform:...