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

后端未结

关注

 3  570

青春惊慌失措 2020-12-04 18:08

I\'m looking for a way to create a slide out \'show more\' feature on my responsive site, which cuts off after two lines of a paragraph.

I\'ve achie

3条回答

感动是毒 (楼主)

2020-12-04 19:09

Starting from your fiddle and wrapped the content into a

with a default class of content, used for selection and a class called hideContent which will be swapped with showContent when clicking the show more/show less link.

I also removed the

the text was in. The text is now within the content-div and we are also now able to apply correct height and line-height settings.

HTML:


    Title goes here
    Subtitle
    
        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.
        Some more text
        
            Some more text
            Some more text
            Some more text
        
    
    
        Show more

CSS:

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

.showContent {
    line-height: 1em;
    height: auto;
}

I'm assuming setting the line-height will ensure it is the same in all browsers. I'm not 100% certain on that though.

I attached a click event to the "show more" link which switches the classes on the 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 applying line-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;
}





  Title goes here
  Subtitle
  
    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.
    Some more text
    
      Some more text
      Some more text
      Some more text
    
  
  
    Show more

The above code is an example only but should get you started into the right direction.

0 讨论(0)

查看其它3个回答