@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";
.block-accordion {
max-width: 768px;
margin: 0 auto;
&__item {
border: 2px solid $primary;
display: flex;
flex-direction: column;
&:not(:last-child){
margin-bottom: 1rem;
}
input:checked ~ &__heading{
&:after{
transform: rotateZ(45deg) translateY(-50%);
}
}
&__heading {
cursor: pointer;
font-size: 1rem;
margin-bottom: 0;
padding: rem-calc(15 20);
position: relative;
user-select: none;
&:after {
border-bottom: rem-calc(2) solid $primary;
border-right: rem-calc(2) solid $primary;
content: "";
display: inline-block;
height: rem-calc(8);
position: absolute;
right: rem-calc(20);
top: 50%;
transform-origin: top;
transform: rotateZ(-135deg) translateY(-50%);
transition: transform .25s;
width: rem-calc(8);
}
}
&__content-wrapper{
box-shadow: inset 0 2px 0 $primary;
height: 0;
overflow:hidden;
transition:height 0.25s ease-out;
}
&__content {
padding: rem-calc(15 20);
p:last-child {
margin-bottom: 0;
}
}
&__toggle {
display: none;
position: absolute;
}
}
}
// Source: https://css-tricks.com/using-css-transitions-auto-dimensions/#aa-technique-3-javascript
function collapseSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// temporarily disable all css transitions
var elementTransition = element.style.transition;
element.style.transition = '';
// on the next frame (as soon as the previous style change has taken effect),
// explicitly set the element's height to its current pixel height, so we
// aren't transitioning out of 'auto'
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
// on the next frame (as soon as the previous style change has taken effect),
// have the element transition to height: 0
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'true');
}
function expandSection(element) {
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
// have the element transition to the height of its inner content
element.style.height = sectionHeight + 'px';
// when the next css transition finishes (which should be the one we just triggered)
element.addEventListener('transitionend', function(e) {
// remove this event listener so it only gets triggered once
element.removeEventListener('transitionend', arguments.callee);
// remove "height" from the element's inline styles, so it can return to its initial value
element.style.height = null;
});
// mark the section as "currently not collapsed"
element.setAttribute('data-collapsed', 'false');
}
// Get all the accordions on the page
var accordions = document.getElementsByClassName('block-accordion');
// Loop through all instances of accordions
for (let i = 0; i < accordions.length; i++) {
// Get all the items in the current accordion
var items = accordions[i].getElementsByClassName('block-accordion__item');
// Loop through all the items
for (let j = 0; j < items.length; j++) {
// On the click event...
items[j].querySelector('.block-accordion__item__heading').addEventListener('click', function(e) {
// Get the elements ready
var section = items[j].querySelector('.block-accordion__item__content-wrapper');
var isCollapsed = section.getAttribute('data-collapsed') === 'true';
// Change the data attribute and fire the collapse/expand depending
if (isCollapsed) {
expandSection(section);
section.setAttribute('data-collapsed', 'false');
} else {
collapseSection(section)
}
});
}
}
This component is not currently used on any pages.