Question

I’m very new to jQuery and this is my first post to Stack Overflow.

I’m writing up a Toggle script where if several (but not all) of the table cells are clicked, the script will toggle the visibility of the tr below it and perform a change class on a div within one of the cells to show a plus/minus icon. I’m hoping to simplify my script and HTML or get general pointers on how to make this better.

The jQuery is as follows:

$(function() {

/************************************************************/
// Show/Hide functionality

   $('.showDetails', '#summaryTable').hide();

   $('#summaryTable').on('click', '.toggleIt', function(e){

   var $this = $(this).parents("tr");

   $this.next().toggle(0, function() {
        var rowExpand = $('.rowExpand', $this);
        rowExpand.toggleClass('rowContract');
     });
  });

/************************************************************/

});

The HTML is as follows:

<table id="summaryTable">

<thead>
<tr>
...
</tr>
</thead>

<tbody>

<tr>
<td class="toggleIt"><div class="rowExpand">Expand/Contract details</div></td>
<td class="toggleIt">Content</td>
<td class="toggleIt">Content</td>
<td>*input field*</td>
<td class="toggleIt">Content</td>
<td class="toggleIt">Content</td>
<td>*Trash can icon*</td>
</tr>

<tr class="showDetails">
<td colspan="7" class="expand">

   <div>
     Content to be shown when toggled...
   </div>

</td>
</tr>

<!-- Rinse and repeat -->

</tbody>

</table>

Notice all those toggleIt classes on the cells where it’s OK to click and have the tr expand? Seems like I should be able to instead place a class on only the table cells where I don’t want the table to expand should the click. (The input field and trash can cells.)

Any thoughts or suggestions are welcome.
Thank you!

Answer 1

you can do this by using the :not selector (http://api.jquery.com/not-selector/)
e.g.

$("td:not(.toggleDisabled)").each(function(){$(this).click(function(){$(this).toggle()})})