title: HTML & jQuery - on click open div
body: <p>I have tried to implement this jquery example: <a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle" rel="nofollow">http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle</a> </p>
  
  <p>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:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  $(document).ready(function(){
  $(".flip").click(function(){
  $(".panel").slideToggle("slow");
    });
  });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  div.panel, p.flip {
  margin: 0px;
  padding: 5px;
  text-align: center;
  background: #333;
  border: 1px solid #2C2C2C
  }
  div.panel {
  display: none;
  }
  &lt;/style&gt;
  
      &lt;div id="content"&gt;
    &lt;h2&gt;Creating the scenario&lt;/h2&gt;
    &lt;p&gt;sample text sample text. &lt;br /&gt;
    &lt;/p&gt;
    &lt;p class="flip"&gt;[+] Code Hint #1&lt;/p&gt;
    &lt;div class="panel" style="line-height:1.5px;"&gt;
      &lt;p&gt;Some hint related to code segment&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;div id="content"&gt;
    &lt;h2&gt;Adding the hero&lt;/h2&gt;
    &lt;p&gt;sample text sample text. &lt;br /&gt;
    &lt;/p&gt;
    &lt;p class="flip"&gt;[+] Code Hint #1&lt;/p&gt;
    &lt;div class="panel" style="line-height:1.5px;"&gt;
      &lt;p&gt;Some hint related to code segment&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;div id="content"&gt;
    &lt;h2&gt;Moving with keyboard commands&lt;/h2&gt;
    &lt;p&gt;sample text sample text. &lt;br /&gt;
    &lt;/p&gt;
    &lt;p class="flip"&gt;[+] Code Hint #1&lt;/p&gt;
    &lt;div id="panel1" class="panel" style="line-height:1.5px;"&gt;
      &lt;p&gt;Some hint related to code segment&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>