Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
190
rated 0 times [  197] [ 7]  / answers: 1 / hits: 21572  / 10 Years ago, sat, april 19, 2014, 12:00:00

I've a div with text inside that is displayed using PHP & MySQL, the structure is like this:



<div class=description>
<p>
Here is a lot of text.
</p>
</div>


I want to display a Read more link when the text inside the p-tag is more than 100 characters. I can display the Read more link with PHP like this:



// strip tags to avoid breaking any html
$string = strip_tags($string);

if (strlen($string) > 100) {

// truncate string
$stringCut = substr($string, 0, 100);

// make sure it ends in a word so assassinate doesn't become ass...
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href=/this/story>Read More</a>';
}
echo $string;


The problem is that when the link is clicked I want to show all of the text in the same DIV. Is this possible with PHP or do I need jQuery or something?


More From » php

 Answers
36

If you want to show the full text without a page reload you will have to use javascript/jquery. For that to work the full text has to be in the generated HTML.



I did this by using 2 divs, one with the shortened text and one with the full text which is hidden by default. When 'read more' is clicked I toggle both divs and change the link label to something like 'see less'.



You could also put the not-shortened text as well as the ellipsis in an element like so:



<div class=readmore>
This is the shortened text<span class=ellipsis>...</span> <span class=moreText>with the full text hidden</span> <a class=more href=#>read more</a>
</div>


See this fiddle.


[#71391] Thursday, April 17, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
zahrafrancisr

Total Points: 176
Total Questions: 105
Total Answers: 99

Location: Svalbard and Jan Mayen
Member since Sun, Sep 25, 2022
2 Years ago
;