Read more...

by labanino

HTML

<blockquote>My husband and I have contracted DE Robinson Construction Group, LLC to build our new residence on Casey Key, Nokomis, FL. We are very pleased with the quality of the work and the efficiency with which the project has proceeded.<br /> 
As a client, my husband has been in the construction and real estate industry on both the commercial and residential side for over 40 years, and is well-qualified to recognize competency and professionalism in a general contractor.  
<span class="read-more-content">Dwayne Robinson displays those skills as well as enjoys a remarkable, solid, strong, mutually respectful relationship with his subcontractors, which is so very crucial to the timely and cost efficient completion of a project.<br />
We do not hesitate to recommend him and his firm in the capacity of a general contractor to any prospective owner to build/renovate in the Sarasota area.</span><br />
<cite><span class="highlight">Steve H. Hacket</span>, Long Boat Key, Sarasota, FL.</cite>
</blockquote>

CSS

body {
    font-family: arial;
    font-size: 0.8em;
}
p {
    padding: 20px;
}
.hide {
    display: none;
}
a {
    color: red;
    text-decoration: none;
    font-weight: 700;
}

JavaScript

// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
$('.read-more-content').addClass('hide')

// Set up a link to expand the hidden content:
.before('<a class="read-more-show" href="#">Read More...</a>')

// Set up a link to hide the expanded content.
.append(' <a class="read-more-hide" href="#">Read Less...</a>');

// Set up the toggle effect:
$('.read-more-show').on('click', function (e) {
    $(this).next('.read-more-content').removeClass('hide');
    $(this).addClass('hide');
    e.preventDefault();
});

$('.read-more-hide').on('click', function (e) {
    $(this).parent('.read-more-content').addClass('hide').parent().children('.read-more-show').removeClass('hide');
    e.preventDefault();
});