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」をつけたり外したりするメソッドだからです

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら