Как открывать отдельные дивы с slideToggle() если у них классы одинаковые?

Question

[gomer1726]

<div class="main"><button class="btn">Click</button></div>
<div class="drop">TEXT TEXT</div>
------------------------------------------------------------
<div class="main"><button class="btn">Click</button></div>
<div class="drop">TEXT TEXT</div>

А теперь jquery

$(".btn").click(function(){
    $(" .drop ").slideToggle();
});

Если нажать на одну кнопку то открываются все дивы с классом ДРОП
Как решить эту проблему можно ли указать родительские селекторы или как быть вообще?
ДИВЫ выводятся циклом если что

Answer 1

[WebDev]

В вашем случае нужно указать родительский main а потом следующий drop

$(document).ready(function() {
    $('.btn').on('click', function(){
        $(this).closest('.main').next('.drop').slideToggle();
    });
});

Примерно так

Comments

[gomer1726]

не работает я поставил все как есть. Ну то есть не менял дивы. Вы писали про родительский класс а это как ?

[WebDev]

gomer1726: скопировал верстку вашу, приведенный мной код работает. У вас все это дело обернуто в $(document).ready() ?

[gomer1726]

kirill-93: неет у меня тоже как здесь нету документ реди

[WebDev]

gomer1726: обновил код в ответе. Попробуйте его

[gomer1726]

gomer1726: да заработало нужно было документ реди. Очень большое человеческое спасибо вам выручили)))

[WebDev]

gomer1726: не за что

[gomer1726]

gomer1726: а кстати можно как то slidetoggle() изначально было скрытым ?

[WebDev]

gomer1726: добавьте в css .drop {display:none}

[gomer1726]

kirill-93: спасибо еще раз ))