PHP add show-hide functionality for text dynamically

Question

Hello!

I have html text that's fetched from a database. The structure of the text is always like this:

<div>Short text</div>Long text

And repetitive: (unpredictible number of times)

<div>Short text</div>Long text
<div>Short text</div>Long text
<div>Short text</div>Long text
<div>Short text</div>Long text

What I want to do is check the length of the "Long text" and if it exceeds 200 chars (for example) make the rest hidden and add a show-hide button.

So:

Long <span id="hidden1" style="display:none;">text</span>
<a href="#" onclick="showHide(1)">show/hide</a>

How can I parse that DB fetched HTML and read the "Long text" to be able to apply the above mentioned changes?

I've been at this for a couple of days already and I just can't figure it out.

Thank you!

Answer 1

The Jquery truncate plugin does pretty much exactly what you're after, allowing you to dynamically hide/show text at a certain character limit.

$().ready(function() {  
  $('#textContainer').jTruncate({  
      length: 200,  
      minTrail: 0,  
      moreText: "[show]",  
      lessText: "[hide]",  
      ellipsisText: " ...", // how indicate to user truncation has happened
      moreAni: "fast",  
      lessAni: 2000  
  });  
});  

The advantage of using this plugin is that you don't need to insert extra markup via PHP at arbitrary points in your content (show/hide span, etc), as the plugin handles that all for you.