Kod ilk tıklamada çalışmıyor (JS)

Arkadaşlar bir a tagine tıklandığında bir divi görünür yapıp tekrar tıklandığında tekrar gizliyorum, kod sorunsuz çalışıyor fakat tek sorun sayfa ilk tıklandığında gizli olan divi görünür hale getirmek için a tagine tıkladığımda ilk tıklamada değil 2. tıklamada kod çalışıyor bu neden olabilir? Kodu aşağı ekledim.

HTML

<div class="sidebar-widget categories mb-2">
                                        <a onclick="typesShowHide()">
                                            <div class="d-flex align-items-center">
                                                <h5 class="collapsible mb-0"> Types </h5>
                                                <i id="typesCollapsiblePlus" class="ri-add-line"></i>
                                            </div>
                                        </a>
                                        <div id="strainTypesCollapsibleContent">
                                            Gösterilen div içeriği
                                        </div>
                                    </div>

CSS

#typesCollapsibleContent, #levelCollapsibleContent {
    display: none;
}

Javascript

function typesShowHide() {
    var getButtonId = document.getElementById("typesCollapsibleContent");
    var getButtonIconClass = document.getElementById("typesCollapsiblePlus")
    if (getButtonId.style.display === "none") {
        getButtonId.style.display = "block";
        getButtonIconClass.classList.remove('ri-add-line');
        getButtonIconClass.classList.add('ri-subtract-line');
    } else {
        getButtonId.style.display = "none";
        getButtonIconClass.classList.remove('ri-subtract-line');
        getButtonIconClass.classList.add('ri-add-line');
    }
}

Javascript inline style okuyor olabilir css de none yapılan elemente inline şekilde display none deneyebilir misiniz?

Yanıtınız için teşekkürler. Evet bu şekilde oldu, aslında bu şekilde bir kullanım benimde aklıma geldi ama ilk düşündüğümde inline olarak girersem tekrar CSS içeriğini güncellese bile inlineda display none var diye yapmayabilir dedim ama bu şekilde çalıştı.

Eğer hem class'tan hem de inline olarak okumak istiyorsanız getComputedStyle(getButtonId) ile yapabilirsiniz.