The code is really easy and ready to be extended with your new features.

The basic HTML structure:

<span class="read-more">Read More +</span>
<div class="moreless textshort">
<p>Any content here lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper purus vel dapibus efficitur. Suspendisse faucibus felis eros, et venenatis neque feugiat dapibus. <strong>Suspendisse pulvinar metus sed risus efficitur</strong> fringilla ac vel lacus. Vestibulum semper vulputate nisl, et tempor elit pharetra sed. Proin eu luctus urna, non auctor justo. Integer facilisis lacinia mi, sed euismod metus tristique elementum. Maecenas non erat ultrices lacus ultrices tristique.</p>
</div>

 

 

Minimal styling:

.textshort {
    height: 20px; // set your own value here
    overflow: hidden;
}
.textfull {
    
}
.read-more {
  cursor: pointer;     
  font-weight: bold; 
  font-size:16px;
}

 

jQuery code:

jQuery(document).ready(function(){   

     jQuery(".read-more").click(function(){        
        var $elem =  jQuery(this).parent().find(".moreless");
        if($elem.hasClass("textshort"))
        {
            $elem.removeClass("textshort").addClass("textfull");        
        }
        else
        {
            $elem.removeClass("textfull").addClass("textshort");        
        }  
});