Can someone advise on this?
Mostly done no errors; goal is for the top element to be hidden on page load, and only appear after clicking the button inside the bottom element.
(display:none not allowed. It’s using animated height.)
Link to RepLit down below.
function collapseSection(element) {
var sectionHeight = element.scrollHeight;
var elementTransition = element.style.transition;
element.style.transition = '';
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
element.style.transition = elementTransition;
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
// mark the section as "currently collapsed"
element.setAttribute('data-collapsed', 'true');
}
function expandSection(element) {
var sectionHeight = element.scrollHeight;
element.style.height = sectionHeight + 'px';
element.addEventListener('transitionend', function(e) {
element.removeEventListener('transitionend', arguments.callee);
element.style.height = null;
});
// mark section "currently not collapsed"
element.setAttribute('data-collapsed', 'false');
}
document.querySelector('#toggle-button').addEventListener('click', function(e) {
var section = document.querySelector('.section.collapsible');
var isCollapsed = section.getAttribute('data-collapsed') === 'true';
if (isCollapsed) {
expandSection(section)
section.setAttribute('data-collapsed', 'false')
} else {
collapseSection(section)
}
});