Question

Ok, so say I have got a table that looks like this:

<table class="first-table" border="1" width="400px">
   <tr>
       <td><?php echo $row_cond['title']; ?></td>
       <td><a class="more" href="#" onClick="slideup()">Display More</a></td>
   </tr>
   <tr class="full_result">
       <td colspan="2"><?php echo $row_cond['description']; ?></td>
   </tr>
</table>

You can see I have got a link that when clicked will call the slideUp() function to show or hide the tr with the “full_result” class:

var command = false;
function slideup() { //New function SlidUp
    if (command == false){
         $('.full_result').fadeIn();
         $('.more').text('Display More');
         command = true;
    }else{
         $('.full_result').hide();
         $('.more').text('Display Less');
         command = false;
    }
}

So the trick is, this is in a while loop and is repeated many times. So how do I make it so that when I click on the link, only the class “full_result” is shown in the table where I clicked the link.

At the moment when I click the button in any table, all the classes show and hide at the same time.

My Solution

$('.full_result').hide();
$(".more").on("click",function(){
    $('.more').html('Display More');
    $('.full_result').hide();
    $(this).parents("tr").next().next().fadeIn();
    $(this).html('');
    return false; //This stops the page jumping to the top of the page when I click the link
});

Answer 1

Try to change your JS code this way and remove “onClick” attribute from “.more” links:

var command = false;
$(".more").on("click",function(){
    if (command == false){
         $(this).parents("tr").next().fadeIn();
         $(this).html('Display Less');
         command = true;
    }else{
          $(this).parents("tr").next().hide();
         $(this).html('Display More');
         command = false;
    }
});

See jsfiddle

EDIT

If you have more than one row below row “.more” you can use .nextAll() to show/hide all next rows. And just use .slideToggle() to avoid using “var command“. This code:

$(".more").on("click",function(){    
         $(this).parents("tr").nextAll().fadeToggle();
         if($(this).html()=="Display More") $(this).html('Display Less');            
         else $(this).html('Display More');
});

See new JSFiddle