javascript - Toggle DIV hide and show -
i trying toggle div(hide , show) when button 'commentdiv' pressed ..but not working far...my html code below. trying here hide/show div block button pressed....i don't know how bind button div....my code able hide div not show again...and think working first commentdiv not others...
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('.commentdiv').hide(); $('.commentbutton').click(function () { $(this).next('.commentdiv').show(); }); $('.closebutton').click(function () { $(this).next('.commentdiv').hide(); }); }); </script> </head> <body> <div id="abc" style="border:2px dashed;width:600px;background:white;"> <table border="2px"> <tr> <td style="text-align:center;"> <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;"> 100 %<br>success</div> <span style="color: green">✔ tested</span> <span>24/4/2013</span> </td> <td> <span id="coupontitle" >flat 25% off on mitashi tablets</span><br> <span id="couponcode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39c46e;color:white">gckspnhiac18</span> <br> <span style="font-size:10pt;">get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.</span> </td> <td style="text-align:center;width:100px"> <span style="font-size:10pt;">did coupon work you?</span> <br> <button type="button" style="border-radius:5px;-moz-border-radius:5px;background:#39c46e;color:white;width:50px;">yes</button> <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#ff511c;color:white;width:50px;">no</button> </td> </tr> <tr> <td colspan="3" style="text-align:right;"> <button type="button" class="commentbutton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">add comments</button> <button type="button" class="closebutton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">close comments</button> <div class="commentdiv" style="height:300px;overflow-x:hidden;"> <table border=".1em"> <tr> <td style="text-align:center;width:100px;height:100px;border-radius:5px;-moz-border-radius:5px;background: url(avatar.jpg) no-repeat center"></td> <td style="width:600px;"> <div style="text-align:left;border-radius:5px;-moz-border-radius:5px;width:100%;overflow: auto;">nice coupons </div> </td> </tr> </table> </div> </td> </tr> </table> </div> <div id="abc" style="border:2px dashed;width:600px;background:white;"> <table border="2px"> <tr> <td style="text-align:center;"> <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;"> 100 %<br>success</div> <span style="color: green">✔ tested</span> <span>24/4/2013</span> </td> <td> <span id="coupontitle" >flat 25% off on mitashi tablets</span><br> <span id="couponcode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39c46e;color:white">gckspnhiac18</span> <br> <span style="font-size:10pt;">get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.</span> </td> <td style="text-align:center;width:100px"> <span style="font-size:10pt;">did coupon work you?</span> <br> <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39c46e;color:white;width:50px;">yes</button> <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#ff511c;color:white;width:50px;">no</button> </td> </tr> <tr> <td colspan="3" style="text-align:right;"> <button type="button" class="commentbutton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">add comments</button> <div class="commentdiv"> <div>get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.</div> </div> </td> </tr> </table> </div><div id="abc" style="border:2px dashed;width:600px;background:white;"> <table border="2px"> <tr> <td style="text-align:center;"> <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;"> 100 %<br>success</div> <span style="color: green">✔ tested</span> <span>24/4/2013</span> </td> <td> <span id="coupontitle" >flat 25% off on mitashi tablets</span><br> <span id="couponcode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39c46e;color:white">gckspnhiac18</span> <br> <span style="font-size:10pt;">get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.</span> </td> <td style="text-align:center;width:100px"> <span style="font-size:10pt;">did coupon work you?</span> <br> <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39c46e;color:white;width:50px;">yes</button> <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#ff511c;color:white;width:50px;">no</button> </td> </tr> <tr> <td colspan="3" style="text-align:right;"> <button type="button" class="commentbutton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">add comments</button> <div class="commentdiv"> <div>get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.get samsung galaxy ace duos s6802 (black) listed on landing page rs. 8495 (originally rs. 9990). offer valid till 25th april midnight.</div> </div> </td> </tr> </table> </div> </body> </html> update: added fiddle here
i have updated code add button closing commentdiv
javascript :
$(document).ready(function () { $('.commentdiv').hide(); $('.commentbutton').click(function () { $(this).next('.commentdiv').show(); }); $('.closebutton').click(function () { $(this).next('.commentdiv').hide(); }); }); and new button :
<button type="button" class="closebutton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">close comments</button> but not working why??
try this:
$(document).ready(function () { $('.commentbutton').click(function () { $(this).next('.commentdiv').toggle(); }); }); 
