如何在按鈕單擊中更改向上箭頭和向下箭頭

Question

我正在使用 css 和 javascript 做一個切換按鈕，我的 html 部分是

<div class="banner" id="btn-accod">
 <button  class="banner-accordin" onclick="bannerOpen()">Here's how you know <i  class="fa fa-angle-down" id="donar"></i></button> 
</div> 

腳本部分是

function bannerOpen(){
    var ban = document.getElementById("banner-content");
     var arrow = document.getElementById("donar");
        if (ban.style.display === "none") {
            ban.style.display = "block";
            arrow .classList.toggle("fa-angle-up");
        } else {
            ban.style.display = "none";
        }
    
  }

但沒有變化，也沒有錯誤顯示為什么？

Answer 1

希望這會奏效！

<div class="banner" id="btn-accod">
 <button class="banner-accordin" onclick="bannerOpen()">Here's how you know <i class="fa fa-angle-down" id="donar"></i></button> 
</div> 

function bannerOpen(){
    var ban = document.getElementById("banner-content");
     var arrow = document.getElementById("donar");
        ban.style.display === "none" ?
            ban.style.display = "block";
            arrow.classList.toggle("fa-angle-up");
            arrow.classList.toggle("fa-angle-down");
        :
            ban.style.display = "none"
            arrow.classList.toggle("fa-angle-up");
            arrow.classList.toggle("fa-angle-down");}