CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 5507

Toggle DIV hide and show

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">&#10004;&nbsp;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">&#10004;&nbsp;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">&#10004;&nbsp;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??

Upvotes: 0

Views: 1154

Answers (9)

gerrod
gerrod

Reputation: 6627

Here's an edit to your fiddle which demonstrates the answer that everyone else is saying:

http://jsfiddle.net/h4G6N/1/

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).

Upvotes: 1

Anjith K P
Anjith K P

Reputation: 2158

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");
});

http://jsfiddle.net/KesY6/1/

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

Try this:

$(document).ready(function () {
    $('.commentButton').click(function () {
        $(this).next('.commentDIV').toggle();
    });
});
  1. Use toggle() - to display or hide the matched elements.
  2. Use next() - to get the immediately following sibling of commentButton.

Upvotes: 1

Rajender Joshi
Rajender Joshi

Reputation: 4205

jQuery deprecated toggle() method. Better use .toggleClass() instead.

.show{
   display: block;
}
.hide{
    display:none;
}
    $("#commentButton").click(function(){
        $("#commentDIV").toggleClass("show hide");
    });

Upvotes: 0

Broxzier
Broxzier

Reputation: 2949

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.

Upvotes: 1

PraJen
PraJen

Reputation: 606

DEMO::

http://jsfiddle.net/Praveen16oct90/KesY6/

Use This coding and try it works

  $(document).ready(function() {


        $('#commentButton').click(function() {

    $('#commentDIV').toggle();

    });
});

Upvotes: 0

swetha
swetha

Reputation: 130

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 4

Piotr Stapp
Piotr Stapp

Reputation: 19830

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.

Upvotes: 1

Related Questions