title: Show more/less with effect
body: <p>I found this code: <a href="https://stackoverflow.com/questions/12307666/how-to-create-a-show-more-button-and-specify-how-many-lines-of-text-can-be-ini">link</a></p>
  
  <pre><code>$(".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);
  });​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    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;
  }
  </code></pre>
  
  <p>​</p>
  
  <p>It was exactly what I was looking for, but as you can see here, if you modify it (<a href="http://jsfiddle.net/Wpn94/2/" rel="nofollow noreferrer">link</a>), the "Show more" link is there if you have only one or two lines, and it is not needed in that case.
  Thank you for your answers!</p>