HTML和jQuery的 - 上點擊開DIV

Question

我試圖實現這個jQuery例如：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

，但它僅與一個DIV工作。當我點擊它們時，如何讓它打開其他div。這就是我：

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".flip").click(function(){ 
$(".panel").slideToggle("slow"); 
    }); 
}); 
</script> 
<style type="text/css"> 
div.panel, p.flip { 
margin: 0px; 
padding: 5px; 
text-align: center; 
background: #333; 
border: 1px solid #2C2C2C 
} 
div.panel { 
display: none; 
} 
</style> 

    <div id="content"> 
    <h2>Creating the scenario</h2> 
    <p>sample text sample text. <br /> 
    </p> 
    <p class="flip">[+] Code Hint #1</p> 
    <div class="panel" style="line-height:1.5px;"> 
    <p>Some hint related to code segment</p> 
    </div> 
</div> 
<br /> 
<br /> 
<div id="content"> 
    <h2>Adding the hero</h2> 
    <p>sample text sample text. <br /> 
    </p> 
    <p class="flip">[+] Code Hint #1</p> 
    <div class="panel" style="line-height:1.5px;"> 
    <p>Some hint related to code segment</p> 
    </div> 
</div> 
<br /> 
<br /> 
<div id="content"> 
    <h2>Moving with keyboard commands</h2> 
    <p>sample text sample text. <br /> 
    </p> 
    <p class="flip">[+] Code Hint #1</p> 
    <div id="panel1" class="panel" style="line-height:1.5px;"> 
    <p>Some hint related to code segment</p> 
    </div> 
</div> 

Answer 1

嘗試

$(".flip").click(function() { 
    $(this).next(".panel").slideToggle("slow"); 
});​ 

jsFiddle example