title: Toggle DIV hide and show
body: <p>I am trying to toggle DIV(hide and show) when button 'commentDIV' is pressed ..But it is not
  working so far...My HTML code is below. What i am trying to do here is hide/show DIV block only whose button is pressed....I don't know how to bind button to DIV....my code is able to hide the DIV not Show again...and i think it is only working for first commentDIV not for others...</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('.commentDIV').hide();
          $('.commentButton').click(function () {
                          $(this).next('.commentDIV').show();
                      });
          $('.closeButton').click(function () {
                          $(this).next('.commentDIV').hide();
                      });
          });
  
  
      &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
                      &lt;div id="abc" style="border:2px dashed;width:600px;background:white;"&gt;
                          &lt;table border="2px"&gt;
                              &lt;tr&gt;
                                  &lt;td style="text-align:center;"&gt;
                                      &lt;div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;"&gt;
                                      100 %&lt;br&gt;Success&lt;/div&gt;
                                      &lt;span style="color: green"&gt;&amp;#10004;&amp;nbsp;Tested&lt;/span&gt;
                                      &lt;span&gt;24/4/2013&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;span id="couponTitle" &gt;FLAT 25% OFF ON ALL MITASHI TABLETS&lt;/span&gt;&lt;br&gt;
  
                                      &lt;span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white"&gt;GCKSPNHIAC18&lt;/span&gt;
                                      &lt;br&gt;
                                      &lt;span style="font-size:10pt;"&gt;Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td style="text-align:center;width:100px"&gt;
                                      &lt;span style="font-size:10pt;"&gt;Did this coupon work for you?&lt;/span&gt;
                                      &lt;br&gt;
                                      &lt;button type="button" style="border-radius:5px;-moz-border-radius:5px;background:#39C46E;color:white;width:50px;"&gt;Yes&lt;/button&gt;
                                      &lt;button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;"&gt;No&lt;/button&gt;
                                  &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td colspan="3" style="text-align:right;"&gt;
                              &lt;button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;"&gt;Add comments&lt;/button&gt;
                              &lt;button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;"&gt;Close comments&lt;/button&gt;
                              &lt;div class="commentDIV" style="height:300px;overflow-x:hidden;"&gt;
                                  &lt;table border=".1em"&gt;
                                      &lt;tr&gt;
                                          &lt;td style="text-align:center;width:100px;height:100px;border-radius:5px;-moz-border-radius:5px;background: url(avatar.jpg) no-repeat center"&gt;&lt;/td&gt;
                                          &lt;td style="width:600px;"&gt;
                                              &lt;div style="text-align:left;border-radius:5px;-moz-border-radius:5px;width:100%;overflow: auto;"&gt;Nice coupons
                                              &lt;/div&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
  
                                  &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;/table&gt;
                      &lt;/div&gt;
                      &lt;div id="abc" style="border:2px dashed;width:600px;background:white;"&gt;
                          &lt;table border="2px"&gt;
                              &lt;tr&gt;
                                  &lt;td style="text-align:center;"&gt;
                                      &lt;div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;"&gt;
                                      100 %&lt;br&gt;Success&lt;/div&gt;
                                      &lt;span style="color: green"&gt;&amp;#10004;&amp;nbsp;Tested&lt;/span&gt;
                                      &lt;span&gt;24/4/2013&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;span id="couponTitle" &gt;FLAT 25% OFF ON ALL MITASHI TABLETS&lt;/span&gt;&lt;br&gt;
  
                                      &lt;span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white"&gt;GCKSPNHIAC18&lt;/span&gt;
                                      &lt;br&gt;
                                      &lt;span style="font-size:10pt;"&gt;Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td style="text-align:center;width:100px"&gt;
                                      &lt;span style="font-size:10pt;"&gt;Did this coupon work for you?&lt;/span&gt;
                                      &lt;br&gt;
                                      &lt;button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39C46E;color:white;width:50px;"&gt;Yes&lt;/button&gt;
                                      &lt;button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;"&gt;No&lt;/button&gt;
                                  &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td colspan="3" style="text-align:right;"&gt;
                              &lt;button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;"&gt;Add comments&lt;/button&gt;
                              &lt;div class="commentDIV"&gt;
                                  &lt;div&gt;Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;/table&gt;
                      &lt;/div&gt;&lt;div id="abc" style="border:2px dashed;width:600px;background:white;"&gt;
                          &lt;table border="2px"&gt;
                              &lt;tr&gt;
                                  &lt;td style="text-align:center;"&gt;
                                      &lt;div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;"&gt;
                                      100 %&lt;br&gt;Success&lt;/div&gt;
                                      &lt;span style="color: green"&gt;&amp;#10004;&amp;nbsp;Tested&lt;/span&gt;
                                      &lt;span&gt;24/4/2013&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;span id="couponTitle" &gt;FLAT 25% OFF ON ALL MITASHI TABLETS&lt;/span&gt;&lt;br&gt;
  
                                      &lt;span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white"&gt;GCKSPNHIAC18&lt;/span&gt;
                                      &lt;br&gt;
                                      &lt;span style="font-size:10pt;"&gt;Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td style="text-align:center;width:100px"&gt;
                                      &lt;span style="font-size:10pt;"&gt;Did this coupon work for you?&lt;/span&gt;
                                      &lt;br&gt;
                                      &lt;button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39C46E;color:white;width:50px;"&gt;Yes&lt;/button&gt;
                                      &lt;button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;"&gt;No&lt;/button&gt;
                                  &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td colspan="3" style="text-align:right;"&gt;
                              &lt;button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;"&gt;Add comments&lt;/button&gt;
                              &lt;div class="commentDIV"&gt;
                                  &lt;div&gt;Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;/table&gt;
                      &lt;/div&gt;
  &lt;/body&gt;             
  &lt;/html&gt;
  </code></pre>
  
  <p>Update: added a fiddle <a href="http://jsfiddle.net/h4G6N/" rel="nofollow">here</a></p>
  
  <p>I have updated the code to add another button for closing commentDIV</p>
  
  <p>Javascript is :</p>
  
  <pre><code>$(document).ready(function () {
          $('.commentDIV').hide();
          $('.commentButton').click(function () {
                          $(this).next('.commentDIV').show();
                      });
          $('.closeButton').click(function () {
                          $(this).next('.commentDIV').hide();
                      });
          });
  </code></pre>
  
  <p>and new button is :</p>
  
  <pre><code>&lt;button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;"&gt;Close comments&lt;/button&gt;
  </code></pre>
  
  <p>But it is not working why??</p>