Accordion footer spacing

[PoW8]

 

<style>
@media (max-width: 749px) {
.grid .footer-block.grid__item {
margin: 0;
}
.grid .footer-block__heading {
position: relative;
margin: 0;
padding: 1.5rem 0;
cursor: pointer;
}
.grid .footer-block__heading::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
text-align: center;
}
.grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
}
.grid .footer-block__heading.block-collapsed + .footer-block__details-content {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
transition: all .2s ease-out;
overflow: hidden;
}
.grid .footer-block__heading + .footer-block__details-content {
visibility: visible;
opacity: 1;
height: auto;
transition: all .2s ease-out;
overflow: hidden;
margin-bottom: 3rem;
}

}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}

const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}

document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')

heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)

heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})

})
</script>

Hello, currently using this code for an accordion footer on the Origin theme. What would need to be added to remove this space?

 

[Liquid_xPert_SJ]

@PoW8 

there will be some margin on the bottom that needs to be remove, if you provide the url i can share the code with you to remove the space.

thanks

[PoW8]

Sorry, printsofwhatever.com password: teunto

[Liquid_xPert_SJ · Accepted solution]

@media (max-width: 749px) {
.footer__blocks-wrapper.grid.grid--1-col {
	margin-bottom: 0 !important;
}	
.footer__content-top {
	padding-bottom: 0 !important;
}
}

[Liquid_xPert_SJ]

Result

[PoW8]

Thanks again, works perfectly. 

[Liquid_xPert_SJ]

no problem 🙂

[PoW8]

If it’s not too much trouble, do you know what I’d have to add to make the opening of the accordion smoother? Instead of being so abrupt. 

[Liquid_xPert_SJ]

@PoW8 

you can write some css transition code for your accordion once the object is expand or collapse. Hopefully you have idea of adding css or transition in CSS.