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');
    }
}