jQuery - Target a specific DIV within another DIV

Question

I have a jQuery function I wrote which will slideToggle an additional table row. There is a cell at the end of the clickable row that contains a button, however as the click of a container div triggers the function, clicking anywhere in the row will cause the new row to expand.

I need the function to only be triggered when the button is clicked as there is scope to add checkboxes, links etc to other parts of the table.

Code:

    var toggleSpeed = 600;
    var expandText = "more";
    var collapseText = "less";
$(".extrainfo_container").click(function() {
       $(this).find('.extrainfo').slideToggle(toggleSpeed);
        if ($(this).find('.moreless').text() == collapseText) {
                $(this).find('.moreless').text(expandText)
        }
        else {
        $(this).find('.moreless').text(collapseText);
    }
    });  




<table>   
     <tr>
        <td>Header 1</td>
        <td>Header 2</td>
        <td>Header 3</td>
    </tr>
</table>
<div class="extrainfo_container">
    <table>   
         <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td><div class="moreless">more</div></td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="extrainfo">
                    Extra information.<p />
                    Extra information.<p />
                </div>
            </td>
        </tr>
    </table>
</div>

Working example: http://jsfiddle.net/E22XR/69/

I have searched the forums, and although I did find similar questions and answers, none of them worked for me. I figure there must be something different I am doing, and/or there is a better way to achive the same result - I am quite new to writing my own functions.

If there is a better way, a requirement is that I do not use IDs as there could be any number of rows created dynamically.

Simply bind the event handler to .moreless instead of .extrainfo_container. Then traverse the DOM to find the right element to show. — Felix Kling
– Felix Kling, Commented Aug 13, 2012 at 12:17

yogi · Accepted Answer · 2012-08-13 17:10:54Z

2

You could do this I guess.

 var toggleSpeed = 600;
    var expandText = "more";
    var collapseText = "less";
$(".moreless").click(function() {
       $(".extrainfo_container").find('.extrainfo').slideToggle(toggleSpeed);
        if ($(".extrainfo_container").find('.moreless').text() == collapseText) {
                $(".extrainfo_container").find('.moreless').text(expandText)
        }
        else {
        $(".extrainfo_container").find('.moreless').text(collapseText);
    }
    });

Edit : Hack for multiples rows

var toggleSpeed = 600;
var expandText = "more";
var collapseText = "less";
$(".moreless").click(function () {
   var detailsRow = $(this).parent().parent().next();
   detailsRow.find('.extrainfo').slideToggle(toggleSpeed);
   if ($(this).text() == collapseText)
      $(this).text(expandText);
   else
      $(this).text(collapseText);
});

edited Aug 13, 2012 at 17:10

answered Aug 13, 2012 at 12:18

yogi

19.6k13 gold badges67 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alan Shortis Over a year ago

Wait - this is not actually totally suitable. One of the requirements is that it would work for multiple rows independently (which is why I didn't use IDs) - however, this now causes all rows to expand whichever row is clicked, and breaks the change of text on the button: jsfiddle.net/E22XR/109

Alan Shortis Over a year ago

This solution is great as it also has an added bonus - all rows can now live inside one table whereas before each row had to be its own table, which is obviously a pain to style and leaves a ton of messy markup around.

Collectives™ on Stack Overflow

jQuery - Target a specific DIV within another DIV

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related