jQuery hide Show More button when text is limited

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.

POPULAR ONLINE

Erro with Web Service Liferay 7

Use a reverse clip-path

Send blob data to NodeJS server from Angular2

Is there any significant difference between defining one click listener on the window and multiple click listeners on element?

How can I create a live-updating bound text input in Angular?

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...

jQuery