How to Prevent Arrow Rotation from Resetting When Switching Accordion Menus in JavaScript?

Beginner Learner

I’m working on an accordion menu that toggles the visibility of menu items and rotates an arrow icon to indicate the open/closed state. The JavaScript code works as expected in most cases, but I noticed an issue: when switching between accordion sections, the arrow rotation sometimes resets or behaves unexpectedly.

HTML Code

 <div class="accordion" onclick="accordian('section-1')">
                <div id="changemenu" class="accordian-text">Burger</div>
                <i class="down-arrow"></i>
            </div>
            <div class="menu-items" id="section-1">
                <div>
                    <input type="checkbox" name="sec-1" id="sc-1cb-1">
                    <label id="change1" for="sc-1cb-1">Cheese Burger</label>
                </div>
</div>

function accordian(disp) {
    var change = document.getElementById(disp); 
    var allsection = document.getElementsByClassName("menu-items");
    var allarrows = document.getElementsByClassName("down-arrow"); 

    for (let i = 0; i < allsection.length; i++) {
        allarrows[i].style.transform = "rotate(45deg)";
        allarrows[i].style.transition = "transform 100ms linear";
    }

    if (change.style.display === "block") {
        change.style.display = "none";
    } else {
        change.style.display = "block";
        var relatedAccordion = change.previousElementSibling;
        var arrow = relatedAccordion.querySelector(".down-arrow");
        arrow.style.transform = "rotate(225deg)";
        arrow.style.transition = "transform 100ms linear";
    }
}

this logic works but when i click quickly it auto updates or runs a bit slower….