javascript - Nested accordion doesn't close with h2 as link -

hello have nested accordion inside accordion. both top level , nested accordions open don't close. noticed text link wrapped in <h1> , <h2>, if remove tags closes. accordion tab @ bottom closes.

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 section title        jquery(this).addclass('active');        // add aria expanded state        jquery(this).attr('aria-expanded', 'true')          // open 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 section title        jquery(this).addclass('active');        // add aria expanded state        jquery(this).attr('aria-expanded', 'true')          // open hidden content panel        jquery(this).attr('aria-hidden', 'true') //added				        jquery(this).attr('aria-selected', 'true') //added          // add aria elected state			        jquery('.accordionnest ' + currentattrvaluenest).slidedown(300).addclass('open');      }      f.preventdefault();    });      });

/**  ---------------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: 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: 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") !important;    background-repeat: no-repeat;    text-decoration: none;    background-position: 0% 50%;  }    a.accordion-section-title.active {    /* type */    background-image: url("/site-resources/resource-files/img/arrow-lg-dn.png") !important;    background-repeat: no-repeat;    background-color: #fbf5db;    text-decoration: none;    background-position: 0% 50%;  }    a.accordion-section-titlenest.active h3 {    /* type */    background-image: url("/site-resources/resource-files/img/arrow-sm-dn.png") !important;    background-repeat: no-repeat;    text-decoration: none;    background-position: 0% 50%;  }    .accordion-section:last-child a.accordion-section-title h2,  .accordion-section:last-child a.accordion-section-titlenest h3 {    border-bottom: none;  }      /*----- section content -----*/    .accordion-section-content,  .accordion-section-contentnest {    padding: 15px;    display: none;    text-decoration: none;    width: 97%;  }    .evenstripe {    background-color: #fbf5db !important;  }      /****--------------- document list ---------------------***/

<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 content. nothing 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 content. nothing 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 content. nothing 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 content. nothing see here, move along now</p>                </div>              </div>              </div>            <!---close accordion col --->          </div>          <!---close accordion nest --->            <!--nested accordion ends here-->        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-3"><h2>tab 2 click here</h2></a>        <div class="accordion-section-content" id="accordion-3">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-4"><h2>tab 3 click here</h2></a>        <div class="accordion-section-content" id="accordion-4">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-5"><h2>tab 4 click here</h2></a>        <div class="accordion-section-content" id="accordion-5">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-6"><h2>tab 5 click here</h2></a>        <div class="accordion-section-content" id="accordion-6">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-7">tab6 click here</a>        <div class="accordion-section-content" id="accordion-7">          <p>this content. nothing see here, move along now</p>        </div>      </div>      </div>    <!--end accordion -->  </div>  <!--end accordion-col-->

you checking if jquery(e.target).is('.active') , adding active class jquery(this) not same, change e.target(and f.target) , work:

(check console in snippet)

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');      console.log("this",jquery(this));      console.log("e.target",jquery(e.target));      if (jquery(this).is('.active')) {        close_accordion_section();      } else {        close_accordion_section();          // add active class section title        jquery(this).addclass('active');        // add aria expanded state        jquery(this).attr('aria-expanded', 'true')          // open 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');      console.log("this",jquery(this));      console.log("f.target",jquery(f.target));      if (jquery(this).is('.active')) {        close_accordion_sectionnest();      } else {        close_accordion_sectionnest();          // add active class section title        jquery(this).addclass('active');        // add aria expanded state        jquery(this).attr('aria-expanded', 'true')          // open hidden content panel        jquery(this).attr('aria-hidden', 'true') //added				        jquery(this).attr('aria-selected', 'true') //added          // add aria elected state			        jquery('.accordionnest ' + currentattrvaluenest).slidedown(300).addclass('open');      }      f.preventdefault();    });      });

/**  ---------------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: 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: 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") !important;    background-repeat: no-repeat;    text-decoration: none;    background-position: 0% 50%;  }    a.accordion-section-title.active {    /* type */    background-image: url("/site-resources/resource-files/img/arrow-lg-dn.png") !important;    background-repeat: no-repeat;    background-color: #fbf5db;    text-decoration: none;    background-position: 0% 50%;  }    a.accordion-section-titlenest.active h3 {    /* type */    background-image: url("/site-resources/resource-files/img/arrow-sm-dn.png") !important;    background-repeat: no-repeat;    text-decoration: none;    background-position: 0% 50%;  }    .accordion-section:last-child a.accordion-section-title h2,  .accordion-section:last-child a.accordion-section-titlenest h3 {    border-bottom: none;  }      /*----- section content -----*/    .accordion-section-content,  .accordion-section-contentnest {    padding: 15px;    display: none;    text-decoration: none;    width: 97%;  }    .evenstripe {    background-color: #fbf5db !important;  }      /****--------------- document list ---------------------***/

<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 content. nothing 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 content. nothing 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 content. nothing 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 content. nothing see here, move along now</p>                </div>              </div>              </div>            <!---close accordion col --->          </div>          <!---close accordion nest --->            <!--nested accordion ends here-->        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-3"><h2>tab 2 click here</h2></a>        <div class="accordion-section-content" id="accordion-3">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-4"><h2>tab 3 click here</h2></a>        <div class="accordion-section-content" id="accordion-4">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-5"><h2>tab 4 click here</h2></a>        <div class="accordion-section-content" id="accordion-5">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-6"><h2>tab 5 click here</h2></a>        <div class="accordion-section-content" id="accordion-6">          <p>this content. nothing see here, move along now</p>        </div>      </div>      <div class="accordion-section"><a class="accordion-section-title" href="#accordion-7">tab6 click here</a>        <div class="accordion-section-content" id="accordion-7">          <p>this content. nothing see here, move along now</p>        </div>      </div>      </div>    <!--end accordion -->  </div>  <!--end accordion-col-->