CODEWITHSUNDEEP
javascriptjqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

slidetoggle table row with jQuery

I'm trying to slide toggle between table rows, however this is not working, I have used this same template on a div on a previous project and this has worked. However when I try to apply the same method to a table it doesn't work as expected, it slides up the previous div in my table row. But doesn't show me the next "toggle settings div".

Unfortunately I have to work with the existing code that I have in the format of table rows. I've broken the code down to show you want I want to be able to do. However I'm not sure if the HTML I've written is even how I should go about this.

My code is below or view my 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>

and my jQuery is as follows:

$(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;
    }); 
 });

Upvotes: 0

Views: 2900

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388446

First your markup is invalid - you have a tr inside another 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>

then

$(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;
    });


});

Demo: Fiddle

Upvotes: 1

Related Questions