JavaScriptでの表示の切り替え

Question

クリックで段落を表示し、2回目のクリックで非表示にするボタンを作成しようとしています。従来のメソッドを使用する代わりに、JavaScriptを使用してスタイルをvisibility:hiddenからvisibilitiy:visibleに変更しました。

<style> 
#p { 
visibility:hidden; 
} 
</style> 

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

<p id="p">hi</p> 

<script> 
function show() { 
    document.getElementById("p").style.visibility = "visible"; 
} 
</script> 

jQueryを使用せずにこれを行うにはどうすればよいですか？

Answer 1

あなたはオンとオフクラスを切り替えることがElement#classListを使用することができます。

var p = document.getElementById("p"); // get a reference to p and cache it 
 

 
function show() { 
 
    p.classList.toggle('hideP'); // toggle the hideP class 
 
} 
 

 
document.getElementById('button').addEventListener('click', show); // add an event listener to the button

.hideP { 
 
    visibility: hidden; 
 
}

<button id="button">Click me</button> 
 

 
<p id="p" class="hideP">hi</p>

Answer 2

あなたはCSSプロパティをテストし、最初のチェックが行われるとVARを設定することができます。

var $test; 
 
function show() { 
 
    if ((document.getElementById("p").style.visibility = "hidden") | ($test!="visible")) 
 
    {document.getElementById("p").style.visibility = "visible"; 
 
    $test="visible" 
 
    } 
 
    else 
 
    {document.getElementById("p").style.visibility = "hidden"; 
 
    $test="hidden"} 
 
}

#p { 
 
    visibility: hidden; 
 
}

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

 
    <p id="p">hi</p>

Answer 3

ここで状態を保存するために隠されたチェックボックスを使用して、非JSのアプローチです：、段落が表示されている場合だけでチェック

input:checked + #text { display: none; }

<label for="check">Press me</label> 
 

 
<input id="check" type="checkbox" style="display: none; "> 
 

 
<p id="text">This is some text.</p>