PHP add show-hide functionality for text dynamically
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 a开发者_StackOverflowbove mentioned changes?
I've been at this for a couple of days already and I just can't figure it out.
Thank you!
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.
精彩评论