slidetoggle table row with jQuery

Question

Я пытаюсь сдвинуть переключатель между строками таблицы, однако это не работает, я использовал этот же шаблон в div в предыдущем проекте, и это сработало. Однако, когда я пытаюсь применить тот же метод к таблице, он не работает должным образом, он сместит предыдущий div в моей строке таблицы. Но не показывает мне следующий «переключатель настроек div».

К сожалению, мне приходится работать с существующим кодом, который у меня есть в формате строк таблицы. Я сломал код, чтобы показать, что я хочу, чтобы я мог это сделать. Однако я не уверен, что написанный мной HTML - это то, как я должен это делать.

Мой код ниже, или просмотреть мой jsFiddle

<table> 
    <tr class="editblocks"> 
    <td><p class="showpageblock">Office One</p></td>   
    <tr> 
     <td><div class="togglesettings">Details for Office One</div></td> 
    </tr> 
    </tr> 
    <tr class="editblocks"> 
    <td><p class="showpageblock">Office Two</p></td>   
     <tr> 
     <td><div class="togglesettings">Details for Office two</div></td> 
     </tr> 
    </tr> 
</table> 

и мой JQuery выглядит следующим образом:

$(document).ready(function() { 

    $('.togglesettings').hide(); 
    $('.togglesettings:first').show(); 
    $('.showpageblock').on('click', function() { 
     $(this).closest('.editblocks').siblings().find('.togglesettings').slideUp(); 
     $(this).next('.togglesettings').slideToggle(); 
     $(this).parent().siblings().children().next().slideUp(); 
     return false; 
    }); 
}); 

Answer 1

Сначала разметка недопустим - у вас есть tr внутри другого tr

<table> 
    <tr class="editblocks"> 
     <td> 
      <p class="showpageblock">Office One</p> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="togglesettings">Details for Office One</div> 
     </td> 
    </tr> 
    <tr class="editblocks"> 
     <td> 
      <p class="showpageblock">Office Two</p> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="togglesettings">Details for Office Two</div> 
     </td> 
    </tr> 
</table> 

затем

$(document).ready(function() { 

    $('.togglesettings').hide(); 
    $('.togglesettings:first').show(); 
    $('.showpageblock').on('click', function() { 
     var $t = $(this).closest('.editblocks').next().find('.togglesettings').stop(true).slideToggle(); 
     $('.togglesettings').not($t).stop(true).slideUp(); 
     return false; 
    }); 


}); 

Демо: Fiddle