CODEWITHSUNDEEP
javascripthtmlcss
Andrew
Andrew

Reputation: 846

How to change up-arrow and down-arrow in button click

i am doing a toggle button in using css and javascript here my html part is

<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>

and script part is

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";
        }
    
  }

but no changes and no error show why?

Upvotes: 0

Views: 4361

Answers (1)

Arijit Kundu
Arijit Kundu

Reputation: 547

Hope this will gonna work !

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

Upvotes: 1

Related Questions