【jQuery】jQueryを使ってクリックした要素の表示、非表示を切り替える

クリックされた要素のID名をクラス名として持つ要素を
表示・非表示と順に切り替える方法を紹介します。
　
　

<div class="hview" id="block01">
    この要素はID名"block01"です。
    ここをクリックするとクラス名"block01"を持つ要素の表示・非表示を切り替えます。
</div>
<div class="block01">
    クラス名：block01
</div>

<script>
$(function(){
    $(".hview").on("click", function() {
        // クリックされた要素のID名をクラス名として持つ要素を切り替える
        $("." + $(this).attr('id')).slideToggle(200);
    });
});
</script>

この方法で、１つのjqueryのメソッドで複数の表示切り替えが作れます。

HTML内で同じID名は１ページにつき１つのみ持てますが、クラス名はいくらあってもいいので
同名のクラスを複数設置し、複数の要素をいっぺんに表示・非表示にすることもできます。