Bootstrap3 + jqueryで要素の表示/非表示を切り替える

2016年10月17日

Bootstrapにはたくさんのクラスが用意されているので、やろうと思ったことを実現するクラスがたいてい存在します。jqueryで要素の表示/非表示を切り替えるのはどうすれば良いのか調べたのでメモしておきます。

Bootstrapではhiddenクラスをつければ非表示になります。

<div id="target" class="hidden"></div>

クラスをつければ操作できるということは、jqueryでクラスを追加・削除すればオッケーということです。

表示する $(“#target").removeClass('hidden’);
非表示にする $(“#target").addClass('hidden’);
表示/非表示切り替え $(“#target").toggleClass('hidden’);

display:noneを使いたくなるのをぐっとこらえましょう。