Q:

Разворачивание текста

ДД.  Использую функцию разворачивания текста! 
<script type="text/javascript"> 
$(document).ready(function(){     
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");          
    });         
});
</script>

Ниже описан код Html:
<div id="panel"> 
 Центральный процессор IBM System x3100 434832X<br>
</div> 
<p class="slide"><a href="#" class="btn-slide">Подробнее...</a></p>

И Еще ниже CSS (на всякий случай)
#
panel {
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
}
.btn-slide {
    text-align: right;
    padding-right:10px;
    margin: 0 auto;
    display: block;
    font-family:verdana, Helvetica, sans-serif;
    font-size:14px;
    color: #0387db;
    text-decoration: none;
}

Все работает нормально с одним объектом!  Но когда я дублирую и хочу чтобы другой блок тоже раскрывался, я задаю все классы и id, он при нажатии разворачивает первый блок.  При дублировании классов с другими именем и дополнительно прописав функции с этими же классами он начинает работать!  Скажите, как сделать чтобы два блока работали от одной функции!  С уважением! 

A:

Задавайте или разные ид всем блокам или делайте <br>
<script type="text/javascript"> 
    $(document).ready(function(){
        $(".btn-slide").click(function(){
            $(this).find("#panel").slideToggle("slow");
        });
    }); 
</script> 
тогда уж вот так

<p class="slide"><a href="#" class="btn-slide">Подробнее...</a> <div id="panel"> 
 Центральный процессор IBM System x3100 434832X<br>
</div> </p>
<script type="text/javascript"> 
        $(document).ready(function(){
            $(".btn-slide").click(function(){
                $(this).parent.find("#panel").slideToggle("slow");
            });
        }); 
    </script>

