Nested accordion

Nested accordion using jquery

by Steve

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="accordionCol">
  <div class="accordion">
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-1"><h2>Tab 1 click here</h2></a>
      <div class="accordion-section-content" id="accordion-1">
        <!--Nested Accordion starts here-->
        <!--Nested Accordion starts here-->
        <div class="accordionCol">
          <div class="accordionNest">
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-1"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-1">

                <!---*********************** INNER datatable starts here **********************--->

                <p>this is some content. nothing to see here, move along now</p>

                <!---************************ INNER datatable ENDs here **************************--->

              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-3"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-3">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>

            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-6"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-6">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-7"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-7">
                <p>this is some content. nothing to see here, move along now</p>
      ...

CSS

/**  ---------------Document List Accordion------------------  **/

.accordionCol {
  margin-bottom: 10px;
}

.accordionColNest {
  margin-bottom: 10px;
}

.accordion,
.accordionNest,
.accordion,
.accordionNest * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion,
.accordionNest {
  overflow: hidden;
  border: 1px solid #f1eac0;
  border-radius: 3px;
  background: #fff;
  width: 98%;
  position: relative;
}

.accordion,
.accordionNest p {
  font-size: 100%;
}

.accordion-section,
.accordion-sectionNest {
  position: relative;
  width: 100%;
  padding-top: 5px;
}


/*----- Section Titles -----*/

a.accordion-section-title h2 {
  width: 100%;
  padding: 15px 10% 15px 5%;
  display: inline-block;
  border-bottom: 0px solid #1a1a1a;
  transition: all linear 0.15s;
  /* Type */
  color: #000;
  text-decoration: none;
  background-image: url("/site-resources/resource-files/img/arrow-lg.png") !important;
  background-repeat: no-repeat !important;
  background-color: #fbf5db;
  background-position: 1% 50% !important;
  position: relative;
  border: 0px solid #f1eac0;
}

a.accordion-section-titleNest h3 {
  width: 100%;
  padding: 15px 10% 15px 5%;
  display: inline-block;
  transition: all linear 0.15s;
  color: #000;
  text-decoration: none;
  background-image: url("/site-resources/resource-files/img/arrow-sm.png") !important;
  background-repeat: no-repeat !important;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1eac0;
  background-position: 1% 50% !important;
  position: relative;
}

a.accordion-section-title:hover {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-lg.png") !important;
  background-repeat: no-repeat;
  background-color: #fbf5db;
  text-decoration: none;
  background-position: 0% 50%;
}

a.accordion-section-titleNest h3.visited,
a.accordion-section-titleNest:hover h3 {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-sm.png")...

JavaScript

jQuery(document).ready(function() {
  function close_accordion_section() {
    jQuery('.accordion .accordion-section-title').removeClass('active');
    jQuery('.accordion .accordion-section-title').attr('aria-hidden', 'false') //added		
    jQuery('.accordion .accordion-section-title').attr('aria-expanded', 'false')
    jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  function close_accordion_sectionNest() {
    jQuery('.accordionNest h3.accordion-section-titleNest').removeClass('active');
    jQuery('.accordionNest h3.accordion-section-titleNest').attr('aria-hidden', 'false') //added		
    jQuery('.accordionNest h3.accordion-section-titleNest').attr('aria-expanded', 'false')
    jQuery('.accordionNest .accordion-section-contentNest').slideUp(300).removeClass('open');
  }

  jQuery('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');
    if (jQuery(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      jQuery(this).addClass('active');
      // Add ARIA expanded state
      jQuery(this).attr('aria-expanded', 'true')
        // Open up the hidden content panel
      jQuery(this).attr('aria-hidden', 'true') //added				
      jQuery(this).attr('aria-selected', 'true') //added
        // Add ARIA elected state			
      jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }
    e.preventDefault();
  });
  jQuery('.accordion-section-titleNest').click(function(f) {
    // Grab current anchor value
    var currentAttrValueNest = jQuery(this).attr('href');
    if (jQuery(f.target).is('.active')) {
      close_accordion_sectionNest();
    } else {
      close_accordion_sectionNest();

      // Add active class to section title
      jQuery(this).addClass('active');
      // Add ARIA expanded state
     ...