1

I've been trying to wrap my head about how to make a function that shows and hides a comment field when a button is clicked. The only problem is that there are multiple line items and multiple comment boxes. I want to avoid dynamically generating ID's for the comment boxes (as in id="box1", id="box2", etc based on how many items are pulled from mysql).

Here is a snippet of the code:

<tr>
    <td>1</td>
    <!-- Line Item # -->
    <td>Foundation</td>
    <!-- Name -->
    <td>1</td>
    <!-- QTY -->
    <td>$50</td>
    <!-- Price -->
    <td>$50</td>
    <!-- Line Total -->
    <td>
        <button class="btn btn-default" type="button" id="OpenImgUpload">Upload Packet</button>
        <br/>
        <button class="btn btn-default" type="button" id="addNotes">Add Notes</button>
        <input type="file" id="upload1" name="upload" multiple />
    </td>
    <td align="center">
        <button type="button" class="btn btn-md btn-primary" id="submitbutton">Submit Item</button>
    </td>
    <tr>
        <td colspan="7">
            <div class="col-sm-12 col-md-12" style="display:none;" id="notes">
                <textarea class="form-control" rows="5" id="comment"></textarea>
            </div>
        </td>
    </tr>
</tr>

Now say that there are multiple instances of this snippet on a page (one instance per line item, of which there are many). How would I go about using JQuery to toggle the nested table row (which contains the comment box of the parent row that contains the line item?

This is the placeholder function that I have right now:

function hide(){
            $('#notes').toggle();

        };

Thanks!

1
  • Yes, I am aware of that, that is why I wrote that I do not want to use ID's and want to select the first instance of the parent table row of the button. I can use classes but that still leaves the issue of how to select the div class thats in the same parent row as the button that triggers it
    – xGrave01
    Oct 21, 2014 at 15:59

2 Answers 2

0

Since your HTML code is repeated you need to use classes instead of ID's. ID's are unique and should only have one instance per page. That being said, maybe something like this:

$('.addNotes').on('click', function(){
  $(this).parent('tr').find('.notes').toggle();
});
0

So you want to toggle the tr that contains the #comment textarea? If that's the case, I think you need some parent/sibling traversal...

$('button').click(function(){
    hide(this);
});

function hide(x){
    $(x).parent().sibling('tr').toggle();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.