隐藏/显示切换按钮不以隐藏内容开头

Question

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>

Answer 1

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>

or you can use ternary operator

<script>
    function toggle(){
        const Text = document.getElementById('moreDetails');
        Text.style.display = Text.style.display == "none" ? "block" : "none";
    }
    document.getElementById("moreDetails").style.display = "none";
</script>

Answer 2

To start with more details hidden, you should add style="display: none;" to your div; Here's the code:

 function toggle() { let Text = document.getElementById('moreDetails'); if (Text.style.display == "none") { Text.style.display = "block"; } else { Text.style.display = "none"; } }

 <div id="moreDetails" style="display: none;"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>

Answer 3

Add display none for div.

 function toggle(){ const Text = document.getElementById('moreDetails'); Text.style.display = Text.style.display == "none"? "block": "none"; }

 <div id="moreDetails" style="display: none"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>