オフの代わりにオンに切り替えるボタン

私はw3の学校からこのコードを適用していますが、コードが更新されたときにコードが公開され、クリックされると折りたたまれます。私は、コンテンツが非表示になることを願って、ボタンがヒットしたときだけを明らかにする。オフの代わりにオンに切り替えるボタン

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the "Try it" button to toggle between hiding and showing the DIV  element:</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<div id="myDIV"> 
 
This is my DIV element. 
 
</div> 
 

 
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> 
 

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

 
</body> 
 
</html>

出典

2017-08-31 Marisa

[JavaScriptでdiv要素を明らかに切り替えるのが重複する可能性。非表示にして、表示するにはクリックしてください]（https://stackoverflow.com/questions/41765069/toggle-reveal-div-with-javascript-start-hidden-click-to-reveal） – PedroSouki

<div id="myDIV" style="display:none;"> 
    This is my DIV element. 
</div>

出典

2017-08-31 18:33:09 mchan

代わりに「表示：コードスニペットで既に定義されているCSS部分の「none」を返します。 CSS上で行われるデフォルトの振る舞いや、クラスやいくつかの場合に直接要素に加えられた変更（さらに悪い習慣だと思います） – Fyllekanin

有効なポイント。 CSSクラスを変更する：https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript – mchan

オフの代わりにオンに切り替えるボタン

答えて

関連する問題