I'm building a read more or lead less div with HTML and vanilla javascript. Everything works, but I have to click the button twice for some reasons to show the text, and from there it works great.

So the issue is, button needs to be clicked twice at first to show the content. From there it works great.

HTML File

<div id="test">
  <p>Hello World</p>
</div>

<button onclick="test()" id="testBtn">Read more</button>

On css file test is display:none

JS file

    var test = document.getElementById("test");
    var btnText = document.getElementById("testBtn");

    if (test.style.display !== "none") {
        btnText.innerHTML = "Read more"; 
        test.style.display = "none";
      } else {
        btnText.innerHTML = "Read less"; 
        test.style.display = "inline";
    }
}