jQuery hide Show More button when text is limited

52
October 22, 2019, at 4:20 PM

I am trying to use a Show More/Show Less button for texts to expand and contract the long texts/paragraphs. The code seems to work fine in all aspect. The one and only flaw is that I can still see the show more button even if the text is limited (say only 1 line). How can I set a condition for the button to only appear if a certain number of lines or text has been displayed (say 3 lines or 50 words or any such possible limitation). I am not being able to figure out how to do it as I am not that good in jQuery. Hence, I am here seeking a solution.

Codepen: [ https://codepen.io/zoomkraft/pen/ZEELQXL ][1]

In the sample above, try eradicating the paragraph limiting it to 1 or 2 line only. The show more button still shows when its not needed as there is not much text for expansion. The should be hidden for such limited texts.

[1]: https://codepen.io/zoomkraft/pen/ZEELQXL

UPDATED

HTML comes within while loop.

<?php while($content = $contents->fetch()){ ?>
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php } ?>
Answer 1

I got the solution to why its not working in while loop.

Removed this

var lengthofContent = $(".content").text(); 
console.log(lengthofContent.length); 
if(lengthofContent.length < 200){ 
$(this).find(".show-more").hide(); 
}

and added this

$('.content').each(function(k,v){
  if ($(v).text().length < 200) {
    $(v).removeClass('hideContent');
    $(v).next().hide();
  }
});
Answer 2

Can you add another class to the show option. Like this

<div class="show-more show-option">
    <span>Show more</span>
</div>

then add the following in the script tag directly.

$('.content').each(function(key,value){
  var lengthofContent = $(value).text();
  if(lengthofContent.length < 200)
    $(value).siblings('show-option').hide();
});

The value of 200 can be configured best based on the number you want.

READ ALSO
Click event fired twice on touch device

Click event fired twice on touch device

I have a checkbox in a sortable div where the click or changed event is triggered twice on touch devices but not on desktop (nor simulating touch on Firefox dev tools) for some obscure reasonThe unwanted effect is the checkbox being toggled twice in a row leaving...

30
Upload a photo on click/submit button

Upload a photo on click/submit button

how can I get jQuery to execute on click instead of just when user chooses a file? I tried onclick and submit on line 2 instead of change, to no avail:

33
How to return a message or value after checking for file with similar hash in Google Drive using ASP.NET

How to return a message or value after checking for file with similar hash in Google Drive using ASP.NET

I am trying to compare the hash of the files that are in the Google Drive but I am unsure how to do itI have a compare hash code block:

27
Upload a file using ajax for PHP using: TypeError

Upload a file using ajax for PHP using: TypeError

I'm actually try to upload an image file by using jQuery ajax methodBut I still have two errors

50