I want the function to executed with a single click but it is getting executed with a double click

Question

I am working with a side navigation bar with a drop down i want the drop down to open with a single click but it needs a double click to open and i don't know why.

js

function sideFunction(){
var sidedropdown = document.getElementsByClassName("dropdown-btn_side");
var j;

for (j = 0; j < sidedropdown.length; j++) {
  sidedropdown[j].addEventListener("click", function() {
  this.classList.toggle("active");
  var sidedropdownContent = this.nextElementSibling;
  if (sidedropdownContent.style.display === "block") {
  sidedropdownContent.style.display = "none";
  } else {
  sidedropdownContent.style.display = "block";
  }
  });
}
}

html

<div class="sidenav">
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#clients">Clients</a>
            <a href="#contact">Contact</a>
            <button onclick="sideFunction()" class="dropdown-btn_side">Dropdown1 
            <i class="fa fa-caret-down"></i>
            </button>
                    <div class="side_dropdown-container">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    </div>
            <a href="#contact">Search</a>
</div>

This is the code I am working with it. I am beginner and have no knowledge of js. A answer with above code modified will be really helpfull.