How to add animate icon menu dropdown open / closed-CodePudding

I built a dropdown menu with fade animation with the help of stackoverflow users. Everything works beautifully. But now I would like to add an icon to the button that changes depending on the open or closed state of the dropdown.

I know how to insert a normal icon, but I have no idea how to show a different icon when the menu is open. Basically I would like to display an X icon when the dropdown is open. While when it is closed a different icon.

Can anyone help me with this small goal? I'm new, I'm trying to learn as much as possible and stack is finding you a valuable source. I appreciate any response, thanks.

function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
  } else { 
    x.className  = " w3-hide";
    setTimeout(function(){
    x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");
      
    },100)
  }
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0; 
    font-size: 13px;
    color: #75777D;
}

.user_menu.item:hover > a {
    color: #2E323A;
}

/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

/* User Menu For header website */
.w3-container {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}

.w3-dropdown-click {
    position: absolute;
    margin-top: 17px;
}

.w3-dropdown-content {
  display: none;
  padding: 20px;
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  position:relative;
  animation:animateFromBottom .3s
}

@keyframes animateFromBottom {
    from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}

@keyframes animateToBottom {
  from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}

.w3-show-block,.w3-show {
    display:block!important;
}

.w3-dropdown-content.w3-hide {
  animation:animateToBottom .3s
}

.user_menu_button {
    width: 100%;
    background: #fbfbfb!important;
    font-weight: 500!important;
}

<button onclick="myFunction()" >Account</button>

<div >
  <div >
      
   <div id="Demo" >
       
    <div >
        <span >Hello User</span>
        <span >User email...</span>
    </div>   
      
     <hr >  
     
    <div >
        <a href="/account">
         <i >1</i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i >2</i>
         <span >My Orders</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i >3</i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i >4</i>
         <span >Settings</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i >5</i>
         <span >Logout</span>
        </a>
    </div>
   </div>
    
  </div>
</div>

CodePudding user response：

You can add font-awesome icons (You have to import the font awesome cdn,https://fontawesome.com

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

)

var menu = document.querySelector(".user_menu_button");
function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
    menu.innerHTML = "<i ></i>";

  } else { 
    x.className  = " w3-hide";
    menu.innerHTML = "<i ></i>";

    setTimeout(function(){
    x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");
      
    },100)
  }
}