Show start of description

1.md

Show first few lines in product description

JS

Short the frist few lines in a description and then a 'read more' button. Clicking on this button will show the whole description.

2.html

<div class="panel panel-default">
      <div id="collapseOne" class="panel-collapse collapse in collapsemob">
        <div class="panel-body">
            <div class="productdetails ">
              <div id="collapslizzle">
              <div class="collapslizzle-content">[@description@]</div>
              <a class="collapslizzle-btn inactive text-center">
              	<div class="text-center">Read More <i class="fa fa-plus-square-o"></i></div>
              </a>
              </div>
            </div>
        </div>
      </div>
</div>

3.js

$('.collapslizzle-btn.inactive').click(function(){
	$('.collapslizzle-content').toggleClass('active');				
	$(this)
	.toggleClass('active')
	.toggleClass('inactive');				
	if ($(this).hasClass('active')) {
		$(this).children('div').html('Hide <i class="fa fa-minus-square-o"></i>');	
	}else {
		$(this).children('div').html('Read More <i class="fa fa-plus-square-o"></i>');	
	}	
});

4.css

.collapslizzle-content {
	height:65px;
	overflow:hidden;
	position:relative;
}
.collapslizzle-content.active {
	height:100%;
}
.collapslizzle-btn{
	margin-top:10px; 
	display:block;
}