Toggle DIV hide and show
Question
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...
<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 ALL 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 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.</span>
</td>
<td style="text-align:center;width:100px">
<span style="font-size:10pt;">Did this coupon work for 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 ALL 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 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.</span>
</td>
<td style="text-align:center;width:100px">
<span style="font-size:10pt;">Did this coupon work for 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 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.</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 ALL 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 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.</span>
</td>
<td style="text-align:center;width:100px">
<span style="font-size:10pt;">Did this coupon work for 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 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.</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Update: added a fiddle here
I have updated the code to add another button for closing commentDIV
Javascript is :
$(document).ready(function () {
$('.commentDIV').hide();
$('.commentButton').click(function () {
$(this).next('.commentDIV').show();
});
$('.closeButton').click(function () {
$(this).next('.commentDIV').hide();
});
});
and new button is :
<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close comments</button>
But it is not working why??
9 answers
solution1
4 2013-04-25 09:09:59
You need to make some changes, instead of using id use class attribute because id should be unique across a document
$(document).ready(function() {
$(document).on('click', '.commentButton', function() {
$(this).next('.commentDIV').toggle()
alert("xscs");
});
});
Demo: Fiddle
solution2
2 2013-04-25 09:10:17
you are using commentButton as id at present which is repeated more times ..When you are tyring to call with ID it should only one time the page. If you want to use multiple times it should be declared as class..So try using class
solution3
1 2013-04-25 09:08:20
You invoke hide() instead of toggle() . Hide will only hide element. toggle will show it when it is hidden, and hide it whe it is shown.
This syntax $('#commentDIV') is responsible for finding element with id commentDIV. Id element should be unique in HTML, so jquery assumes that it is only one.
solution4
1 ACCPTED 2013-04-25 09:10:53
solution5
1 2013-04-25 09:12:22
jQuery comes with another method that exactly does what you need: .toggle()
However, your HTML uses the same ID "commentDIV" more than once. Consider converting these into classes, or us another selector to select the one div you want to toggle.
solution6
1 2013-04-25 09:15:15
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
So change id="commentDIV" to class="commentDIV" and try.
Code:
$('.commentButton').click(function() {
var commentDiv = $(this).closest('tr').find('.commentDIV');
if (commentDiv.is(":visible")) {
commentDiv.hide();
} else {
commentDiv.show();
}
alert("xscs");
});
solution7
1 2013-04-25 09:24:09
Here's an edit to your fiddle which demonstrates the answer that everyone else is saying:
Here's a sample of the updated HTML:
<button type="button" id="commentButton" class="comment-button" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
<div id="commentDIV" class="comment-block">
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.
</div>
</button>
Here's the JS:
$(function() {
$('.comment-button').click(function() {
$(this).next(".comment-block").toggle();
alert("xscs");
});
});
Essentially: you need to use class selectors instead of an ID selector, since your IDs aren't unique (that's a whole other problem).
solution8
0 2013-04-25 09:12:20
DEMO::
http://jsfiddle.net/Praveen16oct90/KesY6/
Use This coding and try it works
$(document).ready(function() {
$('#commentButton').click(function() {
$('#commentDIV').toggle();
});
});
solution9
0 2013-04-25 09:16:20
jQuery deprecated toggle() method. Better use .toggleClass() instead.
.show{
display: block;
}
.hide{
display:none;
}
$("#commentButton").click(function(){
$("#commentDIV").toggleClass("show hide");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.