Добавление эффекта скольжения для нескольких элементов на одной странице

Question

Я пытаюсь добавить эффект слайда для более чем одного div на одной странице, но пока только один мой код:

$(function(){
    $(".child").hide();
    $(".parent").hover(
        function(){ $(".child").slideDown('slow'); },
        function(){ $(".child").slideUp('slow'); }
    );

});

и HTML

<div class="parent">
    <strong>This would display some content that I can click on</strong> 
</div>
<div class="child">
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
</div>

<div class="parent">
    <strong>This would display some content that I can click on</strong> 
</div>
<div class="child">
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
</div>

проблема в том, что я хочу, чтобы одновременно скользил только один div, а не все

Answer 1

Вы можете сделать:

$(".parent").hover(
        function(){ $(this).next(".child").slideDown('slow'); },
        function(){ $(this).next(".child").slideUp('slow'); }
    );

Answer 2

Вы можете использовать :first и :last, чтобы выбрать по одному и открыть его.

Спасибо ..

Answer 3

Вы можете попробовать: jQuery UI - Аккордеон