I'm writing a basic show/hide function that displays a block of content and changes some text from "Show More Benefits" to "Show Less Benefits" (and vice versa).

For some reason though, when I click "Show More Benefits" for the first time, it requires two clicks to run. Afterwards, it alternates back and forth just fine with one click.

Here's my code:

```
<div class="content" id="content"><br>
<p><span class="benefit-stat">$2B</span> lorem</p>
<p><span class="benefit-stat">$2B</span> ipsum</p>
<p><span class="benefit-stat">$100</span> ipsum</p>
<p><span class="benefit-stat">32%</span> ipsum</p>
</div>
<p class="benefits-drop" id="text" onclick="showHide()">See More Benefits</p>
<script>
function showHide(c,t) {
  var c = document.getElementById("content");
  var t = document.getElementById("text");
  if (c.style.display === "none") {
    c.style.display = "block";
    t.innerHTML = 'See Less Benefits';
  } else {
    t.innerHTML = 'See More Benefits';
    c.style.display = "none";
  }
}
</script>

```

Any reason as to why this is happening? How would I go about fixing it?