Упрощение функции щелчка и переключения в jQuery

Question

Хорошо, мне нужна помощь, потому что я просто застрял. Я пытаюсь создать меню простого выпадающего меню, которое будет использоваться для другой цели, а затем меню навигации. Но в любом случае я могу заставить его работать отлично, мне просто нужно помочь, просто используя код. Вот HTML:

<div class="big"> 
    <a href="#" id="atog1">Hello</a> 
    <a href="#" id="atog2">Hello</a> 
    <a href="#" >Hello</a> 
    <a href="#">Hello</a> 
<br clear="all"> 
    <div id="drop" class="atog1">This is a toggled div1!</div> 
    <div id="drop" class="atog2">This is a toggled div2!</div> 
</div> 

Вот исходный код Jquery, который прекрасно работает, но я собираюсь нужно иметь до 20 различных а и дивы, чтобы показать, и я не хочу, чтобы все, что код. Так что я пытаюсь поставить его в чистый простой короткий фрагмент кода:

//Make the toggled div 
$('#atog1').show(); 
$('div.atog1').hide(); 
$('#atog1').click(function(){ 
    $('div.atog2').hide(); 
    $('div.atog1').slideToggle(); 
}); 
//Make the toggled div2 
$('div.atog2').hide(); 
$('#atog2').click(function(){ 
    $('div.atog1').hide(); 
    $('div.atog2').slideToggle(); 
}); 

А вот где я застрял, это то, что должно быть короче версии выше, но когда я нажимаю на первым открывает DIV и когда я нажимаю на втором скрывает первый DIV, но затем, если я нажму на первом в опять не скрывает DIV:

$('div[class^=atog]').hide(); 

$('a').click(function(){ 
    var tid = $(this).attr('id'); 
    $('div#drop[class!='+tid+']').hide(); 
    $('div#drop[class='+tid+']').slideToggle(); 
}); 

Я знаю, что должен быть очень простым решением , но я просто не вижу этого. Спасибо всем заранее, и вот мой jsfiddle, если это более полезно! http://jsfiddle.net/liveandream/stGF9/

Answer 1

Вы не можете иметь несколько элементов с одинаковыми id.

Вы должны использовать классы, когда они должны использоваться совместно. Вот один пример того, как вы могли его изменить.

http://jsfiddle.net/stGF9/54/

$('div.drop').hide(); 

$('a').click(function(){ 
    var tid = $(this).attr('id'); 
    var el = $('div.drop.'+tid); 

    $('div.drop').not(el).hide(); 
    el.slideToggle(); 
});