JS showing div is taking 2 clicks

I am doing a dropdown menu when the user clicks it, but it's taking 2 clicks to show. Here's the HTML of the dropdown:

<div class="user-nav-info" id="user-nav-info">
  <a href="<?php echo ROUTE; ?>/myprofile.php" class="links-3">
    <div class="user-nav-info-links">
      <i class="fa fa-user-circle" aria-hidden="true"></i> My Profile
    </div>
  </a>

  <a href="<?php echo ROUTE; ?>/myprofile.php" class="links-3">
    <div class="user-nav-info-links">
      <i class="fa fa-cog" aria-hidden="true"></i> Settings
    </div>
  </a>

  <hr>

  <a href="<?php echo ROUTE; ?>/close.php" class="links-3">
    <div class="user-nav-info-links">
      <span style="color: #f94128;">
    <i class="fa fa-sign-out" aria-hidden="true"></i> Log Out
      </span>
    </div>
  </a>
</div>

And the JS that makes it show:

function show_profile_menu() {
    var user_info = document.getElementById("user-nav-info");
    var new_button = document.getElementById("user-nav-new");

    if (user_info.style.visibility === "hidden"){ 
        user_info.style.visibility = "visible";
        user_info.style.display = "block";
    } else{
        user_info.style.display = "none";
        user_info.style.visibility = "hidden";
    }
}   

Can someone tell me why is it taking to show 2 clicks?