How to create a "show more" button and specify how many lines of text can be initially shown

Question

I am looking for a way to create a “show more” slide function on my responsive site, which is disabled after two lines of paragraph.

I already did this with a static site, applying the set height to the container and using overflow: hidden and then animating the height of the container.

But, being responsive, the container compresses the text with different browser widths, so the text can take up more space. In addition, each time he pushes him, there may be a different content above the paragraph. Thus, the height setting may not span two lines exactly.

Please check out this jsFiddle: http://jsfiddle.net/XVAzU/ if you need to demonstrate.

Therefore, I need to cut off after two lines of a paragraph, regardless of how wide the container is or what happens before or after this paragraph.

Thanks for watching!

Answer 1

Starting with your violin and wrapping the contents in a <div> with the default class content used to select and a class called hideContent , which will be replaced with showContent when you click the show more/show less link,

I also deleted the <p> text. The text is now in div content, and now we can also apply the correct line height and line height settings.

HTML:

 <div class="text-container"> <h1>Title goes here</h1> <h2>Subtitle</h2> <div class="content hideContent"> 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. <p>Some more text</p> <ul> <li>Some more text</li> <li>Some more text</li> <li>Some more text</li> </ul> </div> <div class="show-more"> <a href="#">Show more</a> </div> </div>​ 

CSS

 .hideContent { overflow: hidden; line-height: 1em; height: 2em; } .showContent { line-height: 1em; height: auto; } 

I assume that setting the line-height ensures that it will be the same in all browsers. I'm not 100% sure about that, though.

I attached the click event to the show more link, which switches classes to div using jQueryUI switchClass () :

 $(".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); });​ 

JsFiddle Demo - show more / show less and apply linear height and animation

 $(".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); }); 

 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div class="text-container"> <h1>Title goes here</h1> <h2>Subtitle</h2> <div class="content hideContent"> 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. <p>Some more text</p> <ul> <li>Some more text</li> <li>Some more text</li> <li>Some more text</li> </ul> </div> <div class="show-more"> <a href="#">Show more</a> </div> </div> 

The above code is just an example, but you should start working in the right direction.

Answer 2

If you are looking for a css only solution check this out:

HTML

  <div class="show-hide-text"> <a id="show-more" class="show-less" href="#show-less">Show less</a> <a id="show-less" class="show-more" href="#show-more">Show more</a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry... </p> </div> 

// CSS

 .show-hide-text { display: flex; flex-wrap: wrap; } .show-hide-text a { order: 2; } .show-hide-text p { position: relative; overflow: hidden; max-height: 60px; // The Height of 3 rows } .show-hide-text p { display: -webkit-box; -webkit-line-clamp: 3; // 3 Rows of text -webkit-box-orient: vertical; } .show-less { display: none; } .show-less:target { display: block; } .show-less:target ~ p { display: block; max-height: 100%; } .show-less:target + a { display: none; } 

Example: https://codepen.io/srekoble/pen/WGBzZa?editors=1100