Hide / Show toggle button doesn't start with content hidden

January 4, 2022

It works but it doesn’t start off with my ‘more details’ content toggled to hidden. It starts off with the content showing. I have rewritten this 10 times and can’t figure it out.

function toggle() {
  let Text = document.getElementById('moreDetails');

  if (Text.style.display == "none") {
    Text.style.display = "block";
  } else {
    Text.style.display = "none";
  }
}

<div id="moreDetails">

  <h3> 001 </h3>

  <h3> Saturate Radio </h3>

  <h4> N00DS </h4>

</div>

<button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>

>Solution :

add style display none to your div id moreDetails

<div id="moreDetails" style="display: none">

or you can use like this also

<script>
function toggle(){
    let Text = document.getElementById('moreDetails');

    if(Text.style.display == "none"){
        Text.style.display= "block";
    }
    else {
        Text.style.display = "none";
    }
}
document.getElementById("moreDetails").style.display = "none";
 
</script>