Jqueryのhide(),show()が思った通りに効いてくれない時

JS

Jqueryで表示・非表示を切り替える便利なメソッドhide()とshow()

簡単に要素を切り替えられるので重宝しますが、ちょっとだけ注意点があります

それはデフォルトでHTML側に表示/非表示を指定する時です

デフォルトのHTMLにはhiddenではなくstyleを指定

Badなやり方(hidden)

HTMLには非表示にする属性「hidden」が用意されてるんですが、このhiddenはJqueryのhide(),show()とは関連がありません

なので以下の様なやり方ではうまくいきません

<div hidden>
  デフォルトでは非表示
</div>
 
<script>
  // クリックしたら
  $('div').show();
</script>

正しいやり方（style）

<div style="display: none;">
  デフォルトでは非表示
</div>
 
<script>
  // クリックしたら
  $('div').show();
</script>

Jqueryのhide(),show()メソッドは、スタイル属性の「display:none」をつけたり外したりするメソッドだからです