CODEWITHSUNDEEP
jqueryhtml
Banjer
Banjer

Reputation: 8320

Exclude multiple elements in .not, including $this

The following hides all table rows, excluding rows with class .accordion or .course_header. 

  $('#course_list').find("tr").not('.accordion, .course_header').hide();

How do I exclude $(this).next("tr") table row as well? That is assuming this is a tr that was just clicked.

Full details

I'm working on a table with an accordion effect using this solution. With the solution as-is, if I click on a row, its child stays expanded. Notice when you click a row in the jsfiddle, it expands the child correctly, but I want it to close the child when I click that same row again.

What I have currently:

var $course_list = $('#course_list');
$course_list.find("tr").not('.accordion, .course_header').hide();
$course_list.find("tr").eq(0).show();

$course_list.find(".accordion").click(function(){
   $course_list.find("tr").not('.accordion, .course_header').hide();
   $(this).next("tr").fadeToggle('fast');
});

Here is the table layout:

<table id="course_list">
  <thead>
    <tr class="course_header">
      <th>Date</th>
      <th>Presenter</th>
      <th>Title</th>
     </tr>
  </thead>
  <tbody>
    <tr class="accordion">
      <td>09.26.14</td>
      <td>Arthur Dent</td>
      <td>Example Course</td>
    </tr>
    <tr>
      <td colspan="4">
        COURSE DETAILS GO HERE
      </td>
    </tr>

    <tr class="accordion">
      <td>09.30.14</td>
      <td>Winston Smith</td>
      <td>Another Example</td>
    </tr>
    <tr>
      <td colspan="4">
        COURSE DETAILS GO HERE
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 134

Answers (1)

Xaver
Xaver

Reputation: 11692

Have you tried to append it to the chain:

var next = $(this).next("tr");
$course_list.find("tr").not('.accordion, .course_header').not(next).hide();

Upvotes: 1

Related Questions