最初にトグルdivを非表示にする

Question

MyDivを最初に隠そうとしています。その後、トグル機能付きのクリックで表示されます。しかし、私は最初にそれを隠すことはできません。

<button onclick="myFunction()">Click Me</button> 

これは私のDIV要素です。

<script>function myFunction() { 
var x = document.getElementById('myDIV'); 
if (x.style.display === 'none') { 
    x.style.display = 'block'; 
} else { 
    x.style.display = 'none'; 
} 

}

Answer 1

それを隠すためにCSSを使用してみてください！

var x = document.getElementById('myDIV'); 
 
function myFunction() { 
 
    if (x.style.display === 'block') { 
 
     x.style.display = 'none'; 
 
    } else { 
 
     x.style.display = 'block'; 
 
    } 
 
}

#myDIV{ 
 
    display: none; 
 
}

<button onclick="myFunction()">Click me</button> 
 

 
<div id="myDIV">Hello world!</div>

それとも、この（差のあまりない）を行うことができます：

var x = document.getElementById('myDIV'); 
 
function myFunction() { 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
}

<button onclick="myFunction()">Click me</button> 
 

 
<div id="myDIV" style='display: none'>Hello world!</div>

EDIT：

あなたが関数に divのIDを送信することができます

この方法：ここで

function myFunction(id) { 
 
    var x = document.getElementById(id); 
 
    if (x.style.display === 'none') { 
 
    x.style.display = 'block'; 
 
    } else { 
 
    x.style.display = 'none'; 
 
    } 
 
}

<button onclick="myFunction('myDIV')">Click me</button> 
 
<div id="myDIV" style='display: none'>Hello world!</div> 
 

 
<br /> 
 

 
<button onclick="myFunction('myDIV2')">Click me</button> 
 
<div id="myDIV2" style='display: none'>Hello world!</div>

Answer 2

この作品最初は

<div id="myDIV" style="display: none;">Some DIV content</div> 

Answer 3

は良い方法です：

CSS

.hide{ 
    display: none; 
} 

HTML

<button onclick="myFunction()">Click Me</button> 
<div id="my_div" class="hide"></div> 

JSあなたのdivのためのHTMLです

function myFunction() { 
    var myDiv = document.getElementById('my_div'); 
    myDiv.classList.toggle("hide"); 
}