Ik heb een button die een box kan togglen. Als je er op klikt, komt hij of verdwijnt het.
<button class="faq-question">Kan ik contact opnemen?</button>
<div class="faq-answer answer-hidden">
Ja dat kan.
</div>
window.onload = function() {
const questions = document.querySelectorAll('.faq-question');
questions.forEach((question) => {
question.addEventListener('click', (e) => {
e.preventDefault();
e.target.classList.toggle('active');
const answer = question.nextElementSibling;
if(answer.classList.contains('faq-answer')){
answer.classList.toggle('answer-hidden');
}
});
});
};
Dit gebeurt nu heel simpel door de answer-hidden class te togglen. Maar ik vroeg me af of het met deze code mogelijk is in de css om een transition te maken dat het lijkt alsof het antwoord uit de vraag glijd. Dus dat de hoogte van 0 naar ... gaat?
