How to show child element when other child element is overflowing with JQuery

Question

I have recently been working on a comment feature. By default, the height of the paragraph element containing the text is 80px. Overflow is set to hidden.

I have another button (labelled "See More") that expands the paragraph by changing height to 'auto'. This button should only be visible if the paragraph content is overflowing the default 80px height. Otherwise the button must not be displayed.

I have tried to do this with a javascript for loop and some JQuery code, though it doesn't work as it should. It shows or hides the button for all comment sections.

Here is the html:

<div class="commentOwnerPost">
  <div class="commentPostHeader">
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
    <h4 class="commentPostDate">3 days ago</h4>
  </div>
  <p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
 amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
  </p>
 
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>

Here is the JavaScript:

$(document).ready(function(){
  var element = $('.commentOwnerPost');
  for(i=0; i < element.length; i++){
    var commentText = $(element[i]).children('.commentText');
    if ($(commentText).offsetHeight < $(commentText).scrollHeight) {
      $parent = $(commentText).parent('.commentOwnerPost');
      $parent.find('.btnSeeMore').hide();
      console.log('Comment text  not overflowing ');
    } else {
      $parent = $(commentText).parent('.commentOwnerPost');
      $parent.find('.btnSeeMore').show();
      console.log('Comment text overflowing ');
    }
   
    $('.btnSeeMore').click(function(){
   
    });
  }
});

Thanks for taking the time to read. Any help would be appreciated.

I would not try to "detect" overflowing, because it is a hassle and uses up a lot of resources compared to what you gain. Maybe you could simplify your problem, for example, by calculating the paragraph text length instead for a pretty good approximation. — Swiffy, Dec 14 '15 at 16:28
Possible duplicate of [Can I detect an overflow event in jquery?](http://stackoverflow.com/questions/10431659/can-i-detect-an-overflow-event-in-jquery) — Swiffy, Dec 14 '15 at 16:29

score 1 · Accepted Answer · answered Dec 14 '15 at 17:11

It works perfectly for me, I simplify your code:

$(document).ready(function(){
  var elements = $('.commentOwnerPost');
  
  elements.each(function() {
    var el = $(this).find('.commentText').get(0);
    if(el.offsetHeight < el.scrollHeight) {
      $(this).find('.btnSeeMore').show();
    } else {
      $(this).find('.btnSeeMore').hide();
    }
  });
});

.commentText { max-height: 25px; overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="commentOwnerPost">
  <div class="commentPostHeader">
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
    <h4 class="commentPostDate">3 days ago</h4>
  </div>
  <p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
 amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
  </p>
 
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>


<div class="commentOwnerPost">
  <div class="commentPostHeader">
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
    <h4 class="commentPostDate">3 days ago</h4>
  </div>
  <p class="commentText"> lorem ipsum dolor sit amet.
  </p>
 
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>

Brilliant. This does work, it just seems there was not enough content in the paragraph to cause overflow. Lesson learned — UnWorld, Dec 16 '15 at 11:01
Yeah, if this conditional `(el.offsetHeight < el.scrollHeight)` is true, the content is overflowing and you can apply the rules you want.Please, give me an upvote ;) Thank you! — Marcos Pérez Gude, Dec 16 '15 at 11:06

How to show child element when other child element is overflowing with JQuery

1 Answers1