jquery - 2つのslidetoggleをJQueryで動作させる方法

Question

基本的に、クリックされるたびに複数のコードを切り替えるコードを取得したいのですが、今はJQueryが初めてで、動作していないようです。少しでも助けていただければ幸いです

<script> 
$(document).ready(function () {
    $("#flip").click(function () {
        $("#panel").slideToggle("1000");
    });
});
</script>

上はスクリプトで、下はそれを有効にしたいコードです。

        <div class = "description">

        <div id="flip">

                dog says how do ?
                <div id="panel">hidden text</div>   
        </div>

                <div id="flip">

                dog says how do ?
                <div id="panel">more hidden text</div>

        </div>

最初の「パネル」は機能しますが、2 番目の「パネル」は休止状態です。

Answer 1

id一意である必要があります。代わりにクラスを使用する必要があります。

<div class="flip">
    dog says how do ?
    <div class="panel">hidden text</div>   
</div>

次に、次のことができます。

$(".flip").click(function(){
    $(this).find(".panel").slideToggle("1000");
});