CODEWITHSUNDEEP
javascriptjqueryuser-interfacefrontend
Bobby
Bobby

Reputation: 89

How to toggle show more button if text overflow

I am trying to toggle show more button if the content overflow from the container then button should be visible if not then hidden

Here is my code

$(document).ready(function() {
var contentHeight = $('.content').height();
  if(contentHeight >= '100px') {
    $('#btn').show();
  } else {
    $('#btn').hide();
  }
});

Upvotes: 1

Views: 2615

Answers (1)

HainKurt
HainKurt

Reputation: 134

maybe you need scrollHeight / overfllow-y:hidden

//var contentHeight = $('.content').height();
var contentHeight = $('.content')[0].scrollHeight;

console.log(contentHeight);
if (contentHeight >= 100) {
  $('#btn').show();
} else {
  $('#btn').hide();
}
.content {
  height: 50px;
  display: inline-block;
  border: 1px solid;
  background-color: #f5f5f5;
  padding: 15px;
  width: 300px;
  overflow-y:hidden;
}

#btn {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<br>
<a id="btn" href="#">Read More</a>

Upvotes: 1

Related Questions