【jQuery】jQueryを使ってクリックした要素の表示、非表示を切り替える
クリックされた要素のID名をクラス名として持つ要素を
表示・非表示と順に切り替える方法を紹介します。
1 | <div class="hview" id="block01"> |
2 | この要素はID名"block01"です。 |
3 | ここをクリックするとクラス名"block01"を持つ要素の表示・非表示を切り替えます。 |
4 | </div> |
5 | <div class="block01"> |
6 | クラス名：block01 |
7 | </div> |
1 | <script> |
2 | $(function(){ |
3 | $(".hview").on("click", function() { |
4 | // クリックされた要素のID名をクラス名として持つ要素を切り替える |
5 | $("." + $(this).attr('id')).slideToggle(200); |
6 | }); |
7 | }); |
8 | </script> |
この方法で、１つのjqueryのメソッドで複数の表示切り替えが作れます。
HTML内で同じID名は１ページにつき１つのみ持てますが、クラス名はいくらあってもいいので
同名のクラスを複数設置し、複数の要素をいっぺんに表示・非表示にすることもできます。
WordPressのサイト制作、保守運用にお困りの方はお気軽にご相談ください。
関連記事
