* { box-sizing:border-box; } @import url(http://fonts.googleapis.com/css?family=Lato:400,700); body { font-family:'Lato'; } .heading-primary { font-size:2em; padding:2em; text-align:center; } .accordion dl, .accordion-list { border:1px solid #ddd; &:after { content: ""; display:block; height:1em; width:100%; background-color:darken(#38cc70, 10%); } } .accordion dd, .accordion__panel { background-color:#eee; font-size:1em; line-height:1.5em; } .accordion p { padding:1em 2em 1em 2em; } .accordion { position:relative; background-color:#eee; } .container { max-width:960px; margin:0 auto; padding:2em 0 2em 0; } .accordionTitle, .accordion__Heading { background-color:#38cc70; text-align:center; font-weight:700; padding:2em; display:block; text-decoration:none; color:#fff; transition:background-color 0.5s ease-in-out; border-bottom:1px solid darken(#38cc70, 5%); &:before { content: "+"; font-size:1.5em; line-height:0.5em; float:left; transition: transform 0.3s ease-in-out; } &:hover { background-color:darken(#38cc70, 10%); } } .accordionTitleActive, .accordionTitle.is-expanded { background-color:darken(#38cc70, 10%); &:before { transform:rotate(-225deg); } } .accordionItem { height:auto; overflow:hidden; //SHAME: magic number to allow the accordion to animate max-height:50em; transition:max-height 1s; @media screen and (min-width:48em) { max-height:15em; transition:max-height 0.5s } } .accordionItem.is-collapsed { max-height:0; } .no-js .accordionItem.is-collapsed { max-height: auto; } .animateIn { animation: accordionIn 0.45s normal ease-in-out both 1; } .animateOut { animation: accordionOut 0.45s alternate ease-in-out both 1; } @keyframes accordionIn { 0% { opacity: 0; transform:scale(0.9) rotateX(-60deg); transform-origin: 50% 0; } 100% { opacity:1; transform:scale(1); } } @keyframes accordionOut { 0% { opacity: 1; transform:scale(1); } 100% { opacity:0; transform:scale(0.9) rotateX(-60deg); } } //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) { 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
Copyright Crusaders AC 2017 - Celebrating 75 Years