表示・非表示の切り替え

jQuery 3以降では非推奨となっています。ただ、ここではこんな方法もあったんだという備忘録として書かせてください。

ここをクリック

開いた内容

<script>
$(document).ready(function(){
 $("#click_this").click(function(){
 var boolean = $("#click_answer");
 boolean.toggle();
 });
});
</script>

#click_this{
 border:solid 1px #EFB1B1;
 background-color:#f0ede8;
 padding:0.5em;
}
#click_this:hover {
 color:tomato;
}
#click_answer {display:none;
 background-color:#EFB1B1;
 padding:0.5em;}

<span id="click_this">ここをクリック</span>
<p id="click_answer">
開いた内容
</p>

関連記事