css 收缩 动画,CSS3响应式垂直手风琴展开收缩动画特效

js代码

//uses classList, setAttribute, and querySelectorAll

//if you want this to work in IE8/9 youll need to polyfill these

(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;

}

};

//function

switchAccordion = function(e) {

console.log("triggered");

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

if(touchSupported) {

accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);

}

if(pointerSupported){

accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);

}

accordionToggles[i].addEventListener('click', switchAccordion, false);

}

})();