Zmiana wartości wysokości za pomocą JS

Question

Chcę aby po kliknięciu element .help uzyskał height: auto; jeśli jej nie posiada lub height: 0; w przeciwnym wypadku. Udało i się to zrobić jednak całość działa dopiero po drugim kliknięciu i nie mampojęcia z czego to wynika, ani jak to naprawić. Kod z html:

<h3 class="faq-header">...</h3>
					<div class="help">
						...
					</div>

Z css:

.help {
    height: 0px;
    overflow: hidden;
    transition: 1s;
}

Z js:

const faqHeaders = document.querySelectorAll('.faq-header');
faqHeaders.forEach(faqHeader => {
    faqHeader.addEventListener('click', () => {
        let syblingStyles = faqHeader.nextElementSibling.style;
        
        if (syblingStyles.height == '0px') {
            syblingStyles.height = 'auto';
            syblingStyles.overflow = 'visible';
            console.log('kl');
        } else {
            syblingStyles.height = '0px';
            syblingStyles.overflow = 'hidden';
            console.log('xd');
        }
    });
});

Dodam, że próbowałem każdej wersji porównania, zarówno == jak i === oraz '0px', 0 + 'px', czy po prostu 0.

Answer 1

Zauważ,że js manipuluje stylem inline, a to co masz w class to inna bajka. Inline na początku jest pusty wiec nic się nie dzieje bo wykonuje się else przypisując syblingStyles.height = '0px'; i dopiero teraz nextElementSibling dostaje style="height:0px"

Może lepiej będzie użyć classList.toggle

const faqHeaders = document.querySelectorAll('.faq-header');
faqHeaders.forEach(el => {
    el.addEventListener('click', () => {
        const syblingStyles = el.nextElementSibling;
        syblingStyles.classList.toggle('help') 
    });
});

 

Comments

Faktycznie lepiej użyć toggle(). Chciałem mieć transition dodane w css, ale nie działają one gdy właściwość ustawiona jest na auto, więc napisałem taki kod i wszystko pięknie działa:

faqHeaders.forEach(faqHeader => {
    faqHeader.addEventListener('click', () => {
        let sybling = faqHeader.nextElementSibling;
        let syblingStyles = faqHeader.nextElementSibling.style;
        let height = sybling.scrollHeight + 'px';
        sybling.classList.toggle('visible');
        if (sybling.classList.contains('visible')) {
            syblingStyles.height = height;
        } else {
            syblingStyles.height = '0px';
        }
    });
});

 Dzięki za pomoc.