Question

I have tried to implement this jquery example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

but it only works with one div. how do I get it to open other divs when i click on them. this is what I have:

<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

Try

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

jsFiddle example