How to show a child when another child is full of jQuery

Question

I recently worked on a comment feature. By default, the height of a paragraph element containing text is 80 pixels. Overflow set to hidden.

I have another button (labeled "See More") that extends the paragraph by changing the height to "auto". This button should only be displayed if the content of the paragraph overflows with a height of 80 pixels by default. Otherwise, the button should not be displayed.

I tried to do this with a javascript for loop and some jQuery code, although it does not work properly. 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.

Answer 1

It works great 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>