繰り返しトグルを使う

Question

私は画像を表示するために各divセクションをトグルしています。それはうまく動作しますが、コードが繰り返されています。このドライを作るにはどうすればいいですか？

// Show hide Maps 
$(".secblue").click(function() { 
    $("#mgmap").toggle("slow"); 
}); 

// Show hide Maps 
$(".secgreen").click(function() { 
    $("#glmap").toggle("slow"); 
}); 

// Show hide Maps 
$(".secpurple").click(function() { 
    $("#ufmap").toggle("slow"); 
}); 

// Show hide Maps 
$(".secorange").click(function() { 
    $("#llmap").toggle("slow"); 
}); 

Answer 1

data-target各ボタンの属性（またはアンカーまたはdiv要素または任意のあなたがクリックされている要素がある）を追加します：

<button class="secblue" data-target="mgmap">...</button> 
<button class="secgreen" data-target="glmap">...</button> 
... 

をしてからちょうど持っているすべての要素のクリックイベントにサブスクライブこのdata-target属性を取得し、対応するターゲット要素を取得して切り替えます。

$('button[data-target]').click(function() { 
    var target = $(this).data('target'); 
    $('#' + target).toggle('slow'); 
});