jQuery Accordion Откройте только одну вкладку одновременно

Question

Я пользуюсь аккордеоном от HERE. В нем требуется небольшая модификация, а именно Откройте только одну вкладку одновременно.

HTML

<div class="container"> 
     <h1 class="heading-primary">CSS Responsive Animated Accordion</h1> 
     <div class="accordion"> 
     <dl> 
      <dt> 
      <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger"> 
       First Accordion heading</a> 
      </dt> 
      <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> 
      <p>Some data in first tab.</p> 
      </dd> 
      <dt> 
      <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger"> 
       Second Accordion heading</a> 
      </dt> 
      <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> 
      <p>Some data in second tab.</p> 
      </dd> 
     </dl> 
     </div> 
</div> 

JS

$(document).ready(function() { 

var d = document, 
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'), 
    setAria, 
    setAccordionAria, 
    switchAccordion, 
    touchSupported = ('ontouchstart' in window), 
    pointerSupported = ('pointerdown' in window); 
skipClickDelay = function (e) { 
    e.preventDefault(); 
    e.target.click(); 
} 

setAriaAttr = function (el, ariaType, newProperty) { 
    el.setAttribute(ariaType, newProperty); 
}; 

setAccordionAria = function (el1, el2, expanded) { 
    switch (expanded) { 
     case "true": 
      setAriaAttr(el1, 'aria-expanded', 'true'); 
      setAriaAttr(el2, 'aria-hidden', 'false'); 
      break; 
     case "false": 
      setAriaAttr(el1, 'aria-expanded', 'false'); 
      setAriaAttr(el2, 'aria-hidden', 'true'); 
      break; 
     default: 
      break; 
    } 
}; 

switchAccordion = function (e) { 
    e.preventDefault(); 
    var thisAnswer = e.target.parentNode.nextElementSibling; 
    var thisQuestion = e.target; 

    if (thisAnswer.classList.contains('is-collapsed')) { 
     setAccordionAria(thisQuestion, thisAnswer, 'true'); 
    } else { 
     setAccordionAria(thisQuestion, thisAnswer, 'false'); 
    } 

    thisQuestion.classList.toggle('is-collapsed'); 
    thisQuestion.classList.toggle('is-expanded'); 
    thisAnswer.classList.toggle('is-collapsed'); 
    thisAnswer.classList.toggle('is-expanded'); 

    thisAnswer.classList.toggle('animateIn'); 
}; 


for (var i = 0, len = accordionToggles.length; i < len; i++) { 
    if (touchSupported) { 
     accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); 
    } 
    if (pointerSupported) { 
     accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); 
    } 
    accordionToggles[i].addEventListener('click', switchAccordion, false); 
} 
}); 

Если это делает вещи легко, то, "мне нужно только две вкладки" Я пытался, но не успех. Что мне не хватает?

Answer 1

Итак, наконец, вытолкнул какой-то код.

JS - Большая часть кода неизменные

$(document).ready(function() { 

    var d = document, 
     accordionToggles = d.querySelectorAll('.js-accordionTrigger'), 
     touchSupported = ('ontouchstart' in window), 
     pointerSupported = ('pointerdown' in window), 

     skipClickDelay = function (e) { 
      e.preventDefault(); 
      e.target.click(); 
     }, 

     setAriaAttr = function (el, ariaType, newProperty) { 
      el.setAttribute(ariaType, newProperty); 
     }, 

     setAccordionAria = function (el1, el2, expanded) { 
      switch (expanded) { 
       case "true": 
        setAriaAttr(el1, 'aria-expanded', 'true'); 
        setAriaAttr(el2, 'aria-hidden', 'false'); 
        break; 
       case "false": 
        setAriaAttr(el1, 'aria-expanded', 'false'); 
        setAriaAttr(el2, 'aria-hidden', 'true'); 
        break; 
       default: 
        break; 
      } 
     }, 

     switchAccordion = function (e) { 
      e.preventDefault(); 
      var thisAnswer = e.target.parentNode.nextElementSibling, 
       thisQuestion = e.target, 
       // Check if the answer is in collapsed state 
       isCollapsed = thisAnswer.classList.contains('is-collapsed'); 

      // Iterate over all the toggles and collaspse 
      // them all and only toggle the current tab 
      for (var i = 0; i < accordionToggles.length; i++) { 
       var currQuestion = accordionToggles[i], 
        currAnswer = currQuestion.parentNode.nextElementSibling; 

       setAccordionAria(currQuestion, currAnswer, 'false'); 

       currQuestion.classList.add('is-collapsed'); 
       currQuestion.classList.remove('is-expanded'); 
       currAnswer.classList.add('is-collapsed'); 
       currAnswer.classList.remove('is-expanded'); 

       currAnswer.classList.remove('animateIn'); 

      } 

      if (isCollapsed) { 
       setAccordionAria(thisQuestion, thisAnswer, 'true'); 

       thisQuestion.classList.add('is-expanded'); 
       thisQuestion.classList.add('is-collapsed'); 
       thisAnswer.classList.add('is-expanded'); 
       thisAnswer.classList.remove('is-collapsed'); 
       thisAnswer.classList.add('animateIn'); 
      } 
     }; 


    for (var i = 0, len = accordionToggles.length; i < len; i++) { 
     if (touchSupported) { 
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); 
     } 
     if (pointerSupported) { 
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); 
     } 
     accordionToggles[i].addEventListener('click', switchAccordion, false); 
    } 
}); 

Check Fiddle

Я переработан код и повторно написал код, с помощью JQuery, который позволит сэкономить много строк кода. Тем не менее, он может быть оптимизирован.

JQuery

$(document).ready(function() { 

    var d = document, 
     $accordionToggles = $('.js-accordionTrigger'), 
     touchSupported = ('ontouchstart' in window), 
     pointerSupported = ('pointerdown' in window), 

     skipClickDelay = function (e) { 
      e.preventDefault(); 
      e.target.click(); 
     }, 

     setAriaAttr = function (el, ariaType, newProperty) { 
      el[0].setAttribute(ariaType, newProperty); 
     }, 

     setAccordionAria = function (el1, el2, expanded) { 
      setAriaAttr(el1, 'aria-expanded', expanded ? true : false); 
      setAriaAttr(el2, 'aria-expanded', expanded ? false : true); 
     }, 

     switchAccordion = function (e) { 
      e.preventDefault(); 

      var $this = $(this), 
       $thisQuestion = $this, 
       $thisAnswer = $this.closest('dt').next('dd'), 
       // Check if the answer is in collapsed state 
       isCollapsed = $thisAnswer.hasClass('is-collapsed'); 

      // Iterate over all the toggles and collaspse 
      // them all and only toggle the current tab 
      for (var i = 0; i < $accordionToggles.length; i++) { 
       var $currQuestion = $accordionToggles.eq(i), 
        $currAnswer = $currQuestion.closest('dt').next('dd'); 

       setAccordionAria($currQuestion, $currAnswer, false); 

       $currQuestion.addClass('is-collapsed').removeClass('is-expanded'); 
       $currAnswer.addClass('is-collapsed').removeClass('is-expanded animateIn'); 
      } 

      if (isCollapsed) { 
       setAccordionAria($thisQuestion, $thisAnswer, true); 

       $thisQuestion.addClass('is-expanded is-collapsed'); 
       $thisAnswer.addClass('is-expanded animateIn').removeClass('is-collapsed'); 
      } 
     }; 

    // Assign the click events using jQuery 

    if (touchSupported) { 
     $accordionToggles.on('touchstart', skipClickDelay); 
    } 
    if (pointerSupported) { 
     $accordionToggles.on('pointerdown', skipClickDelay); 
    } 
    $accordionToggles.on('click', switchAccordion); 
}); 

jQueryFiddle