I am trying to toggle DIV(hide and show) when button 'mentDIV' 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 mentDIV not for others...
<html>
<head>
<script src=".3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('mentDIV').hide();
$('mentButton').click(function () {
$(this).next('mentDIV').show();
});
$('.closeButton').click(function () {
$(this).next('mentDIV').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="mentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close ments</button>
<div class="mentDIV" 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="mentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<div class="mentDIV">
<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="mentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<div class="mentDIV">
<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 mentDIV
Javascript is :
$(document).ready(function () {
$('mentDIV').hide();
$('mentButton').click(function () {
$(this).next('mentDIV').show();
});
$('.closeButton').click(function () {
$(this).next('mentDIV').hide();
});
});
and new button is :
<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close ments</button>
But it is not working why??
I am trying to toggle DIV(hide and show) when button 'mentDIV' 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 mentDIV not for others...
<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.mentDIV').hide();
$('.mentButton').click(function () {
$(this).next('.mentDIV').show();
});
$('.closeButton').click(function () {
$(this).next('.mentDIV').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="mentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close ments</button>
<div class="mentDIV" 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="mentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<div class="mentDIV">
<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="mentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<div class="mentDIV">
<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 mentDIV
Javascript is :
$(document).ready(function () {
$('.mentDIV').hide();
$('.mentButton').click(function () {
$(this).next('.mentDIV').show();
});
$('.closeButton').click(function () {
$(this).next('.mentDIV').hide();
});
});
and new button is :
<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close ments</button>
But it is not working why??
Share Improve this question edited Apr 25, 2013 at 10:42 Vaibhav Jain asked Apr 25, 2013 at 9:05 Vaibhav JainVaibhav Jain 5,52710 gold badges57 silver badges115 bronze badges 3-
3
try using
.toggle()instead of.hide()/.show()should help you! :) – Henrik Andersson Commented Apr 25, 2013 at 9:06 - .toggle() – huMpty duMpty Commented Apr 25, 2013 at 9:08
- 2 You cannot have multiple ID in your document. ID must be unique, use CLASS – Roko C. Buljan Commented Apr 25, 2013 at 9:13
9 Answers
Reset to default 4You 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', '.mentButton', function() {
$(this).next('.mentDIV').toggle()
alert("xscs");
});
});
Demo: Fiddle
you are using mentButton 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
Try this:
$(document).ready(function () {
$('.mentButton').click(function () {
$(this).next('.mentDIV').toggle();
});
});
- Use toggle() - to display or hide the matched elements.
- Use next() - to get the immediately following sibling of
mentButton.
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 $('#mentDIV') is responsible for finding element with id mentDIV. Id element should be unique in HTML, so jquery assumes that it is only one.
jQuery es with another method that exactly does what you need: .toggle()
However, your HTML uses the same ID "mentDIV" more than once. Consider converting these into classes, or us another selector to select the one div you want to toggle.
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
So change id="mentDIV" to class="mentDIV" and try.
Code:
$('.mentButton').click(function() {
var mentDiv = $(this).closest('tr').find('.mentDIV');
if (mentDiv.is(":visible")) {
mentDiv.hide();
} else {
mentDiv.show();
}
alert("xscs");
});
http://jsfiddle/KesY6/1/
Here's an edit to your fiddle which demonstrates the answer that everyone else is saying:
http://jsfiddle/h4G6N/1/
Here's a sample of the updated HTML:
<button type="button" id="mentButton" class="ment-button" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add ments</button>
<div id="mentDIV" class="ment-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() {
$('.ment-button').click(function() {
$(this).next(".ment-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).
DEMO::
http://jsfiddle/Praveen16oct90/KesY6/
Use This coding and try it works
$(document).ready(function() {
$('#mentButton').click(function() {
$('#mentDIV').toggle();
});
});
jQuery deprecated toggle() method. Better use .toggleClass() instead.
.show{
display: block;
}
.hide{
display:none;
}
$("#mentButton").click(function(){
$("#mentDIV").toggleClass("show hide");
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745434600a4627549.html
评论列表（0条）