Don't show all the row information (only when I press "view")

Question

I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it all.

I please you to suggest me a script that shows only some content of the row, and the rest when you press something like "view all". For example :

enter image description here

Check out my answer. hope to help – Siamak Motlagh Jan 06 '13 at 18:32 — Siamak Motlagh, Jan 06 '13 at 18:32

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

You need to look into truncating the content string, there's a load of answers available here for both JavaScript and PHP based solutions:

JavaScript: smart way to shorten long strings with javascript
PHP: Shorten string with a "..." body

So you show the truncated string to begin with and then on the full view use the original string.

Depending on how your table in the example is setup you could also try using CSS to truncate and have it add the elipses as well.

CSS: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

edited May 23 '17 at 12:12

Community

1
1

answered Jan 06 '13 at 18:12

diggersworld

12,770
24
84
119

Ok..it works fine with css..Thanks and sorry but I didn't know what to write in serach bar :D – Ion Farima Jan 06 '13 at 18:29

score 1 · Answer 2 · answered Jan 06 '13 at 18:28

Well, I think you want something like this:
Live jsfiddle

js

$(function()
{
    var maxShow = 50;
   $( ".holder" ).each(function() 
   {
       var txt = $(this).text();
       txt = txt.substr(0,maxShow)+' ...';
       $(this).prev().prev().text(txt);
   });
  $(".show").click(function()
  {
      var txt = $(this).next('span').text();
      $(this).parent().text(txt);
  });
});

html

<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 0 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>
<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 1 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>
<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 2 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>

css

.holder
{
  display:none;
}

Yes ! Something like this but I'd rather use the CSS ;) Thanks — Ion Farima, Jan 06 '13 at 18:33

Don't show all the row information (only when I press "view")

2 Answers2