CODEWITHSUNDEEP
javascriptjquery
user3066048
user3066048

Reputation: 3

Toggle table icon with jquery

I have a snippet of my table structure below. 

<tr>
    <td class="center "><a href="#" class="icon-plus-sign"></a></td>
    <td>IMG</td>
    <td>This is the listings title</td>
    <td>This is the listings description</td>
    <td>Status</td>
    <td>Actions</td>
</tr>                   
<tr class="extra">
    <td colspan="6">
        <table cellpadding="5" cellspacing="0" border="0" class="inner-table">
            <tbody>
               <tr>
                  <td><b>Current Price</b></td>
                  <td>$ 34.67</td>
               </tr>
               <tr>
                  <td><b>Listing Ends</b></td>
                  <td>06.11.2013 12:20:47</td>
               </tr>
               <tr>
                  <td><b>Extra info</b></td>
                  <td>And any further details here</td>
               </tr>
            </tbody>
        </table>
    </td>
</tr>

I am using jquery to hide/show the extra table row using the below code.

jQuery(function ($) {   
    $("#items .center").on('click', function (e) {
    e.preventDefault();
    if ($(this).parent().next('tr').css('display') == 'none') {
        $("#items tr.extra").hide();
        $(this).addClass('open').parent().next('tr').show().addClass('highlight');
        } else {
            $('#items tr.extra').hide();
            $(this).removeClass('open');
            }
        $('#items tr.extra td').css('border-collapse', 'collapse');
     });
});

I am trying to get the icon to toggle when opening and closing hidden table rows.

As you can see in the fiddle the icon will only toggle when opening and closing the next hidden row only.

See http://jsfiddle.net/magmate11/2e2yy/4/ for an example.

Thanks in advance.

Upvotes: 0

Views: 658

Answers (1)

siniy
siniy

Reputation: 271

Paste

$("#items td.center").removeClass('open');

after

if ($(this).parent().next('tr').css('display') == 'none') {
    $("#items tr.extra").hide();

Result

if ($(this).parent().next('tr').css('display') == 'none') {
    $("#items tr.extra").hide();
    $("#items td.center").removeClass('open'); // NEEDED LINE
    $(this).addClass('open').parent().next('tr').show().addClass('highlight');
} else {
    $('#items tr.extra').hide();
    $(this).removeClass('open');
}

Upvotes: 2

Related Questions