title: Show "show more" button and hide second line
body: <p>I'm totally lost here. I'm trying to display information on my website on only using one line of text. If more info need to be shown, the extra info will be shown on second line. But how can I hide the second line and show a button "show more" instead? </p>
  
  <p>Once the user clicks on the show more button, the extra info/texts on second line will only be shown. Thanks...</p>
  
  <p>Below is my javascript for the button, I have no idea how to code the html part where the second line will be hidden automatically and display the "show more" button.</p>
  
  <pre><code>var hide2 = 1;    
  $('#showmorerates').click(function(){
              if(hide2 == 1){
                  $('.morerates').toggle(300);
                  document.getElementById("showmorerates").innerHTML = '&lt;a&gt;Show Less&lt;/a&gt;';
                  hide2 = 0;
              } else {
                  $('.morerates').toggle(300);
                  document.getElementById("showmorerates").innerHTML = '&lt;a&gt;Show More&lt;/a&gt;';
                  hide2 = 1;
              }
      });
  </code></pre>