Smooth opening animation for Accordions and FAQ | Voters

Smooth opening animation for Accordions and FAQ

Philipp Niehaus

Opening FAQ and Accordions directly looks outdated and choppy. There should be an animation that opens elements smoothly, as is already the case with the Accordions in the vertical navigation.

June 3, 2023

Rick Bleakley

Agreed - someone on the group gave me this CSS (haven't tried it)
%%SELECTOR%% {
--faqTransitionDuration: 0.3s; / set up as you like 
/
}
%%SELECTOR%% .bde-faq__answer {
display: block;
padding: 0;
width: 100%;
transition-property: max-height;
transition-duration: var(--faqTransitionDuration);
transition-timing-function: cubic-bezier(0,1,0,1);
overflow: hidden;
max-height: 0px;
}
%%SELECTOR%% .bde-faq__item.is-active .bde-faq__answer {
max-height: 5000px;
height: auto;
transition: max-height var(--faqTransitionDuration) cubic-bezier(1,0,1,0);
}
%%SELECTOR%% .bde-faq__answer-content {
padding: var(--faqItemVerticalPadding) var(--faqItemHorizontalPadding);
}

Rob de Wit

Rick Bleakley: That CSS works on the FAQ widget. Nice! But it would be nice if this can be integrated into BD for the FAQ / accordeon / etc widgets.

Rick Bleakley

Rob de Wit: yeah it works I use it all the time, 100% agree on it being integrated