HTMLを開いたときに非表示にしてjQueryで後から要素を表示させるためにやる設定

問題

Webページを開いたときには隠しておきたいHTMLの要素には以下のようにhiddenオプションを入れると思います。

<div id='hoge' hidden>hoge</div>

上記を表示させたいときにJavaScriptでDOM操作をするとこんな感じになります。

document.getElementById("hoge").hidden = false;

同じようなことをjQueryでやるとこんな感じです。

$('#hoge').show();

DOM操作よりも直感的でわかりやすいですが、これだとhiddenに対して設定変更しているわけではないのでこのままだと表示されることもありません。かといって別にエラーではないので原因を特定しづらいです(フロントエンドの辛いところ)。

jQueryをつかっているのならDOM操作は極力やりたくありません。

ではどうすればいいでしょう？

解決策

この問題を解決するためにはそもそもhiddenオプションを使わずにstyle = 'display:none'をHTMLに適用させれば解決します。

ただ、人によっては「styleはCSSに適用させたいんだよ！」って人もいると思いますが、僕はBootstrapを使うことが多くあまりCSSを自分で用意することがないので、HTMLにベタ打ちする書き方をしています。

<div id='hoge' style = 'display:none'>hoge</div>

これで$('#hoge').show();を実行したときにコンテンツが表示されるようになります。