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

This code also requires optimisation. – Exception Oct 01 '15 at 06:51 — Exception, Oct 01 '15 at 06:51

KAD · Answer 1 · 2015-10-01T07:08:04.010

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

here expand all link is not working in the other way around. on second clik it is not closing all opned tr and not toggling the text (collapsse all) — Sowmya, Oct 01 '15 at 06:57
I have update the fiddle with collapse all, this still needs some adjustment, a flag to detect if all are collapsed or all expanded, so the you change the text of the (expand/collapse all) link when the (More/Less) link is clicked. But this is the idea how it works.. — KAD, Oct 01 '15 at 07:02

Guruprasad J Rao · Answer 2 · 2015-10-01T07:28:14.220

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

Since I have used toggle on expand all, it is not woking as expected. when clicked on the `Expand all` (in ur fiddle expand/collpase text is not toggled) and click on any row level `less` link and again click on `Collapse all` link .. In this scenario all the rows are not collapsing. Any suggestions? — Sowmya, Oct 01 '15 at 06:59
`elem.html() === "More"` Don't compare with html, use text(). And also trim() it for foolproof results. — Exception, Oct 01 '15 at 07:00
Anytime.. Happy coding.. Do not forget to mark it as answer.. :) — Guruprasad J Rao, Oct 01 '15 at 08:30
@GuruprasadRao Any light on this one? http://stackoverflow.com/a/32840692/1033200 — Sowmya, Oct 01 '15 at 10:20

score 0 · Answer 3 · answered Oct 01 '15 at 06:49

0

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

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

answered Oct 01 '15 at 06:49

orlland

1,256
8
12

score 0 · Answer 4 · answered Oct 01 '15 at 06:50

0

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.

answered Oct 01 '15 at 06:50

Araknid

476
4
10

score 0 · Answer 5 · answered Oct 01 '15 at 06:58

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

score 0 · Answer 6 · answered Oct 01 '15 at 07:06

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.

table row text truncation

6 Answers6