初心者でもコピペだけで導入できるJavaScript第二弾です。
第一弾はこちら
【JavaScript】初心者でも簡単！CSSよりも便利に使えるJavaScriptコード 2選！
https://bloggercustoman.blogspot.com/2019/08/cssjavascript-2.html
jQueryを導入していない方はheader要素内に以下のコードを記述しておいて下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
hide、show、toggleを使い分けてクリックで要素の表示・非表示を切り替えよう
ベースとなるのは以下のコードです。
<script>
$('#ID名').click(function() {
/*ここに動作を記述*/
})
</script>
ここから#ID名がクリックされた場合の動作を記述していくことになります。
- hide = 要素を非表示にする
- show = 要素を表示する
- toggle = 要素の表示・非表示を交互に繰り返す
hide、show
hide
それでは、サンプルです。
HTML
<span id="bana_t1">バナナ</span>
<span id="bana_t2">リンゴ</span>
JavaScript
<script>
$('#bana_t1').click(function() {
$('#bana_t2').hide();
})
</script>
ID属性
bana_t1の「バナナ」をクリックすると、ID属性
bana_t2の「リンゴ」が非表示になるコードです。
サンプル
バナナ リンゴ
「バナナ」をクリックすると「リンゴ」が消えましたよね？
CSSのdisplay:none;と同様の効果があります。
このままでは消えたままで出てきません。
showで出してみましょう。
show
showで要素を表示させるには、その要素を隠しておく必要があるので、予め表示したい要素をdisplay:none;で隠しておきましょう。
HTML
<span id="bana_t3">バナナ</span>
<span id="bana_t4" style="display:none;">リンゴ</span>
JavaScript
<script>
$('#bana_t3').click(function() {
$('#bana_t4').show();
})
</script>
hideが
showに変わっただけです。
ID属性
bana_t3の「バナナ」をクリックすると、
display:none;を指定したID属性
bana_t4の「リンゴ」が表示されるコード。
サンプル
バナナ リンゴ
どうでしょう。
今度は「バナナ」をクリックすると「リンゴ」が出てきましたよね。
しかし、今度は出てきたままで消えません。
そこで、1クリックごとに交互に表示・非表示を繰り返す
toggleを使用してみましょう。
toggle
toggleは、1クリック目が非表示であるのなら、2回目は以降は表示・非表示を繰り返します。
予めdisplay:none;で隠しておいたものであるなら、1クリック目が表示となるので、2回目は以降は非表示・表示を繰り返すことになります。
HTML
<span id="bana_t5">バナナ</span>
<span id="bana_t6">リンゴ</span>
<span id="bana_t7" style="display:none;">メロン</span>
JavaScript
<script>
$('#bana_t5').click(function() {
$('#bana_t6').toggle();
$('#bana_t7').toggle();
})
</script>
サンプル
バナナ リンゴ メロン
IDしか記述していない「リンゴ」は最初から表示され、1クリック目で非表示となった一方で、display:none;を記述してある「メロン」は逆に1クリック目で表示されていますよね。
toggleは何度クリックしても交互に動作を繰り返すのが特徴です。
おまけ
全てに共通することですが、.
hide();の()の中に要素を表示・非表示するまでのミリ秒数（1000 = 1秒）を指定することが可能で、
ちょっとしたアニメーション効果を演出できます。
HTML
<div id="bana_t11" style="padding:20px;background-color:#ff8080;">バナナ</div>
<div id="bana_t12" style="padding:20px;background-color:#226b80;">リンゴ</div>
JavaScript
<script>
$('#bana_t11').click(function() {
$('#bana_t12').toggle(1000);
})
</script>
サンプル
toggleとしか記述していないため、デフォルトの横方向のアニメーションが適用されていますが、
toggleには他にもメソッドが存在します。
- slideToggle = 縦方向のアニメーション
- fadeToggle = フェードイン・アウトのようなアニメーション
※
toggleの箇所を上記のどちらかに書き換えるだけ。
Tを大文字にすることが必須！
サンプル（
slideToggle）
サンプル（
fadeToggle）
toggleClassというメソッドもあり、新たにclass属性を追加、削除が可能です。
また、今回はIDを指定しましたが、IDではなく、
class名を指定したいときは、#を.に書き換えてください。
例
<script>
$('.bana_t5').click(function() {
$('.bana_t6').toggle();
$('.bana_t7').toggle();
})
</script>
第二弾は以上です。
簡単に応用できるJavaScriptなので、様々な形で使用してみてください。
