ShowMoreLess

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class='showmore'>
  hello my friend.
  <br/> this is sample text.
  <br/> There is more text below, you may need to click the <a class='showmorelink' href='#'>show more</a> link to view it
  <br/> This is the text that I was referring to.<span class='showlessplaceholder'></span>
</div>

CSS

div {
  line-height: 1em;
}

.showmore {
  height: 3em;
  overflow: hidden;
}

.showless {
  height: auto;
  overflow: auto;
}

JavaScript

$(document).ready(function() {
  $('a.showmorelink').click(ShowMoreData);
});

function ShowMoreData() {
  var $this = $(this);
  $this.closest('div.showmore').removeClass('showmore').addClass('showless');
  $this.nextAll('span.showlessplaceholder').each(AddShowLessItem);
  $this.replaceWith('<span class="showmorelink"/>');
}

function AddShowLessItem() {
  var $this = $(this);
  $this.html('<br/><a class="showlesslink" href="#">show less</a>');
  $this.find('a.showlesslink').click(ShowLessData);
}

function ShowLessData() {
  var $this = $(this);
  var $parentSpan = $this.closest('span.showlessplaceholder');
  $parentSpan.empty().closest('div.showless').removeClass('showless').addClass('showmore').find('span.showmorelink').replaceWith('<a class="showmorelink" href="#">show more</a>');
  $parentSpan.prevAll('a.showmorelink').click(ShowMoreData);
}