0

I have card with my properties, where is also description (fetched from DB), but since it is too long I need to hide most of it and show it again with "read more" button. I know the solution for hard-coded text, but I don't know how to apply it for fetched data.

I am thinking of something like this:

<p class="card-text"><?php 
        if(strlen($fetch['description']) > 50) {
          echo '<a href="#" class="read-more">Show More</a>';
        } else {
          // SOLUTION HERE
        }
?></p>

jQuery for changing show-more-show less:

$(document)
    .on('click','.read-more',function() { 
        $(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis'); 
    })

    .on('click','.show-less',function() { 
        $(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis'); 
    });
  • 2
    Why wouldn't you just echo the show less link in that space? Am I missing something? – ADyson Jan 02 '21 at 19:08
  • How would you normally do it for hard coded text - are you needing to wrap the description value from the database beyond the first 50 characters in an extra HTML tag or something? – steve Jan 02 '21 at 19:11
  • The code does not work - yes the button is changing from Show More to Show Less, but the actual text is not changing and you can still see the full description. Let's say my description in database has 200 characters, I fetch it on front-end - `echo $fetch['description']` but i need to show only 50 characters out of 200, after clicking on "show more" button - the whole 200 characters will appear –  Jan 02 '21 at 19:22
  • So are you saying you need logic in the PHP to decide how much of the text to show initially? We can't see where or how you are displaying the text – ADyson Jan 02 '21 at 19:56
  • You can see it in my post - I can't describe it more in details. I am just missing the PHP logic of how to show only part of a description and after clicking show more button the whole description will be shown. –  Jan 02 '21 at 20:06
  • In the [PHP manual there are whole lot of string manipulation function](https://www.php.net/manual/en/ref.strings.php), TL;DR start by looking at `substr()` – RiggsFolly Jan 02 '21 at 20:23

1 Answers1

1

Sorry to say that but I think your approach is wrong.

If the php code just outputs the first 50 chars to the HTML page e.g. with substr() the rest of the text will not be there inside the HTML code! So your jquery will not be able to display it (unless you use AJAX/Reload what will be an extreme overkill).

Your solution should be: get all text and if it is too long, show only the intro text, hide the remaining text and show the remaining text via JS/JQUERY as explained in the post How to hide/show more text within a certain length (like youtube)

The fiddle taken from the linked post above shows exactly the desired behaviour.
http://jsfiddle.net/zA23k/215/

so your HTML output should look like (modified code from fiddle)

    [...]Mary had a little lamb
    <span class="complete"> 
    Its fleece was white as snow And everywhere that Mary went</span>
    <span class="more">more...</span>
    [...]

so your code should be something like:

<p class="card-text"><?php
         $txt=$fetch['description'];
        if(strlen($txt) < 50) {
          echo $txt;
        } else {
            echo substr($txt,0,50)."<span class=\"complete\">". substr($txt,50)."</span>". "<span class=\"more\">more...</span>";
        }
?>

This very simple substr() solution has one drawback: If position 50 is within a word this word will be mutilated.
This can be fixed with wordwrap() or with regexps

Alexander Dobernig
  • 753
  • 6
  • 21
  • Thank you Alexander for making my question clear - I got it, you redirected me to right path but I still don't get the html - what should I put to the "complete" class and so on - all text is fetched from db so it would be ` $fetch['description']` ? –  Jan 03 '21 at 16:44
  • Please see the fiddle i have posted in my original answer - there you find the JS + CSS code for hiding the long text. (initially it is hidden by CSS [ .complete{display:none;} - then by clicking more it is displayed by the jquery toggle - if you follow the fiddle and use the code there it should work as there is only. #### if my answer has helped you please click accept answer above. ;-) – Alexander Dobernig Jan 03 '21 at 17:00
  • >all text is fetched from db so it would be >$fetch['description'] #### NO. please use the code i have posted in the answer above. It posts the first 50 chars in the teaser and the remaining text in the initially hidden element. – Alexander Dobernig Jan 03 '21 at 17:01