Read more / less toggle

by sambaldwin

HTML

<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

<a class="readmorebtn"></a>

<p class="more">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

CSS

body {
    font-family:Helvetica Neue, sans-serif;
    font-size:100%;
    line-height:1.4em;
    font-weight:500;
    margin:20px;
}
p {
    margin:1.4em 0;
}
p.more {
    display:none;
}
a.readmorebtn {
    cursor:pointer;
    color:#aaa;
}
a.readmorebtn:hover {
    border-bottom:1px #aaa solid;
}

JavaScript

$(document).ready(function () {
    $("a.readmorebtn").click(function(){
    var moreAndLess = $("p.more").is(':visible') ? 'More' : 'Less';
    $(this).text(moreAndLess);
    $("p.more").slideToggle();
});
    
    
});