Steve February 2016

Nested accordion doesn't close with h2 as link

Hello I have a nested accordion inside another accordion. Both top level and nested accordions open but don't close. I noticed that my text link is wrapped in an <h1> and <h2>, If I remove the tags it closes. The accordion tab at the 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 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('        

Answers


adilapapaya February 2016

It's because you're clicking on the h2/h3 element, and not the a element. You can either

  1. Move your h2/h3 outside of the a like this:

    <div class="accordion-section">
       <h2>
         <a class="accordion-section-title" href="#accordion-3">
          Tab 1 click here
        </a>
      </h2>
     ......
    

    (This will require editing your css)

or,

  1. Replace all your e.target and f.target with e.target.parentNode and f.target.parentNode so that it's actually checking the a element when you click on the h2,h3 element.


jolmos February 2016

You are checking if jQuery(e.target).is('.active') and then adding the active class to jQuery(this) that are not the same, change the e.target(and the f.target) to this and it will work:

(check the console in the 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 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('.accord 

Post Status

Asked in February 2016
Viewed 1,701 times
Voted 8
Answered 2 times

Search




Leave an answer