CODEWITHSUNDEEP
phpjavascriptjquerywhile-loopshow-hide
Ben
Ben

Reputation: 355

How to select a specific class when others have the same name?

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

Upvotes: 0

Views: 129

Answers (4)

brains911
brains911

Reputation: 1310

Here is something you can try:

$('.more').on('click',function(){
    var text = $(this).text() === "Display More" ? "Display Less" : "Display More";
    $(this).text(text)
           .closest('table').children('.full_result').fadeToggle();
});

Upvotes: 0

Codegiant
Codegiant

Reputation: 2150

try this

HTML CODE

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

JS CODE

$('.more').on('click', function(){
    slideup();

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

Upvotes: 0

khomyakoshka
khomyakoshka

Reputation: 1279

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

Upvotes: 1

Prem
Prem

Reputation: 5974

You can have a common class on table and refer to the required tr as below

1) have some common class on table tag. for ex:
2) script should be as below. with this you dont have to call inline functions.

$(document).on('click', '.tr-hidable .more',function(){
  if (command == false){
    $(this).parents('tr-hidable').first().find('full-result').fadeIn();
    $(this).text('Display More');
    command = true;
  }else{
    $(this).parents('tr-hidable').first().find('full-result').fadeOut();
    $(this).text('Display Less');
    command = false;
  }
});

or if we dont have any dynamic elements, we can replace the first line of script with below line and all the remining script will remain same.

$('.tr-hidable .more').on('click',function(){

Hope, it helps!

Upvotes: 0

Related Questions