table row text truncation

Question

I have a table which has more/less functionality in the row level. I need to include Expand/Collapse All option in the table level so it will be easier to expand all the rows at once.

In my current code, row level and table level expanding works fine on it's individual.

But when I expand using Expand All link, row level more/less links should also act together. Currently when Expand All link is clicked, row level more/less link still shows as More link but it should get changes to Less link.

Here is my code,

var minimized_elements = $('.grid_moretext span');

    minimized_elements.each(function(){    
    var t = $(this).text();        
    if(t.length < 55) return;

    $(this).html(
    t.slice(0,55)+'<span>... </span>'+
    '<span class="more_text" style="display:none;">'+ t.slice(55,t.length)+' </span>'
    );
    }); 
    $('a.tr_expand').click(function(event){
        event.preventDefault();
        $(this).parent().siblings().find("span.more_text").toggle();       
                if ($(".tr_expand").text() == "More") {
                    $(".tr_expand").text("Less");
                }
                else {
                    $(".tr_expand").text("More");
                }
    });
    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });
    $('a.less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();    
    });

    $('a.expand_all').click(function(event){
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();  
        if ($(".expand_all").text() == "Expand All") {
            $(".expand_all").text("Collapse All");
        }
        else {
            $(".expand_all").text("Expand All");
        }
    });

DEMO

Answer 1

I have update a working fiddle with collapse

I have made the following changes:

Use $(this) to set the clicked expand link text rather than the whole class selection ;

 $('a.tr_expand').click(function(event){
            event.preventDefault();
            $(this).parent().siblings().find("span.more_text").toggle(); 
             // console.log($(".tr_expand").text());
                    if ($(this).text() == "More") {
                        $(this).text("Less");
                    }
                    else {
                        $(this).text("More");
                    }

        });

In the expand all button, loop through the expand links and simply trigger the click of the link if it has 'More' text, if the row is already expanded, the toggle will collapse it again which was not the expected behavior.

$('a.expand_all').click(function(event){
   event.preventDefault();
   $('a.tr_expand').each(function(){
      if($(this).text() == "More" && $('a.expand_all').text() == "Expand All" )
      {
          $(this).trigger('click');
      } 
      else if($(this).text() == "Less" && $('a.expand_all').text() == "Collapse All" )
      {
          $(this).trigger('click');
      } 

    });

    if ($(this).text() == "Expand All") {
         $(this).text("Collapse All");
     }
     else {
         $(this).text("Expand All");
     }
});

Answer 2

DEMO

Two things

One

$('a.tr_expand').click(function(event){
    event.preventDefault();
    $(this).parent().siblings().find("span.more_text").toggle();       
    //use $(this) to target current anchor element and check its text with .html
    if ($(this).html() == "More") {
        $(this).html("Less");
    }
    else {
        $(this).html("More");
    }
});

Two

Inside expand_all event click change the html again based on current value

$('a.expand_all').click(function(event){
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();    
    var elem=$(this).next().find('.tr_expand')
    if(elem.html()=="More")//check for html again
        elem.text('Less');
    else
        elem.text('More');
});

---

UPDATE

DEMO

Add a class to tr_expand while clicking on itself and on Expand All to identify whether it has been already expanded or collapsed as below:

$('a.tr_expand').click(function(event){
    event.preventDefault();
    var elem=$(this).parent().siblings().find("span.more_text");//store reference to element's more_text
    elem.toggle();//toggle it
    $(this).toggleClass('expand');//toggleClass expand
    if ($(this).html().trim() == "More") {
        $(this).html("Less");
    }
    else {
        $(this).html("More");
    }
});

Next on Expand_all click Loop through each tr_expand and its siblings and toggle it based on presence of class on tr_expand as below:

$('a.expand_all').click(function(event){
    event.preventDefault();
    $('.tr_expand').each(function(){
        var elem=$(this);
        if(!elem.hasClass('expand'))//check if element is already expanded
        {
            //if no find all its `grid_moretext` element and toggle its span.more_text
            elem.closest('td').siblings(".grid_moretext").each(function(){
               $(this).find("span.more_text").toggle();    
            });
            if(elem.html()=="More")
            {
                $('a.expand_all').text('Collapse All')
                elem.text('Less');
            }
            else
            {
                $('a.expand_all').text('Expand All')
                elem.text('More');
            }
        }
        else
            elem.toggleClass('expand'); //if expand is not there add it again
    });
});

Answer 3

Use this so that it will refer to the clicked More link.

if ($(this).text() == "More") {
  $(this).text("Less");
}
else {
  $(this).text("More");
}

Answer 4

Here is the updated fiddle - http://jsfiddle.net/z9hzstzc/1/ . I have changed the condition check for $('tr.expand') by putting it in a loop.

Answer 5

I have did following changes in your Fiddle

$('a.expand_all').click(function(event){
        if ($(".tr_expand").html() == "More") {
                    $(".tr_expand").html("Less");
                }
                else {
                    $(".tr_expand").html("More");
                }
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();    
    });

Here is DEMO

Answer 6

Using this jQuery :

$('a.tr_expand').text(function (i, t) {
    return t == 'More' ? 'Less' : 'More';
});

you can easily achieve what you're seeking.

Here I've updated your JSFiddle

    // For individual click events
    $('a.tr_expand').click(function (event) {
        event.preventDefault();
        $(this).parent().siblings().find("span.more_text").toggle();

        $(this).text(function (i, t) {
            return t == 'More' ? 'Less' : 'More';
        });
    });

   //For group toggle

   $('a.expand_all').click(function (event) {
       event.preventDefault();
       $(this).next().find(".grid_moretext span.more_text").toggle();
       $('.tr_expand').text(function (i, t) {
           return t == 'More' ? 'Less' : 'More';
       });
   });

It will do the trick for you.