Show more / less with effect

Question

I found this code: link

$(".show-more a").on("click", function() { var $this = $(this); var $content = $this.parent().prev("div.content"); var linkText = $this.text().toUpperCase(); if(linkText === "SHOW MORE"){ linkText = "Show less"; $content.switchClass("hideContent", "showContent", 400); } else { linkText = "Show more"; $content.switchClass("showContent", "hideContent", 400); }; $this.text(linkText); });​ 

CSS

  div.text-container { margin: 0 auto; width: 75%; } .hideContent { overflow: hidden; line-height: 1em; height: 2em; } .showContent { line-height: 1em; height: auto; } .showContent{ height: auto; } h1 { font-size: 24px; } p { padding: 10px 0; } .show-more { padding: 10px 0; text-align: center; } 

This was exactly what I was looking for, but, as you can see here, if you change it ( link ), "Show more" if you have only one or two lines, in which case it is not needed. Thank you for your responses!

Answer 1

Since your sample code did not work fully, I decided to refine one of my own samples that I created in a post some time ago.

DEMO - Show more / less and hide the link if necessary

The demonstration shows that the first text has no link, and the second for the link. If you add a few more characters to the first text, you will see that the link appears when you re-run the script.

The idea is to double check the client against the actual height and determine if you want to display the link. As shown below.

 $(".show-more a").each(function() { var $link = $(this); var $content = $link.parent().prev("div.text-content"); console.log($link); var visibleHeight = $content[0].clientHeight; var actualHide = $content[0].scrollHeight - 1; // -1 is needed in this example or you get a 1-line offset. console.log(actualHide); console.log(visibleHeight); if (actualHide > visibleHeight) { $link.show(); } else { $link.hide(); } }); 

The demo uses the following HTML:

 <div class="text-container"> <h1>Lorem ipsum dolor</h1> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt </div> <div class="show-more"> <a href="#">Show more</a> </div> </div> <div class="text-container"> <h1>Lorem ipsum dolor</h1> <div class="text-content short-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="show-more"> <a href="#">Show more</a> </div> </div>​ 

and the following basic CSS:

 div.text-container { margin: 0 auto; width: 75%; } .text-content{ line-height: 1em; } .short-text { overflow: hidden; height: 2em; } .full-text{ height: auto; } h1 { font-size: 24px; } .show-more { padding: 10px 0; text-align: center; } 

Answer 2

See a working script here - http://jsfiddle.net/tariqulazam/hpeyH/

First you need to measure whether the content is full or not. I used a solution from overflowing elements using jquery .

Finally, use this plugin to decide whether to show or hide the show more link.

 $("div.content").HasScrollBar() ==true ? $(".show-more").show():$(".show-more").hide(); 

Answer 3

I don’t know what your real question is, but I assume that you want to deactivate the “show more” link if the text is only 1 or 2 lines and active if the text has more than 2 lines.

To do this, you need to check if there is more div with text than your threshold (2 lines). In my solution, I use the height () function, which gives you the height in a pixel . In the original example, the link text is not displayed if the height is greater than 2em . You are better off using a pixel for this or using a unit conversion tool.

Here are my addition lines for a solution with a threshold of 1 line :

 var text = $('.text-container'); if (text.height() <= 20) { $('.show-more').hide(); } 

http://jsfiddle.net/JRDzf/

Answer 4

  if( $('.text-container').html().indexOf("<br") >= 0 ) { $(".show-more").hide() }