Read more / less toggle @dystroy

See: http://stackoverflow.com/questions/15085400/jquery-deprecated-toggle-seeking-alternative-method

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;
    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;
}
a.readmorebtn:hover {
    border-bottom:1px black solid;
}

JavaScript

var moreText = "Read more";
var lessText = "Read less";

$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments),
    _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length]();
        _this.data('func_count', i+1);
    });
}

$(document).ready(function () {
    $("a.readmorebtn").text(moreText);
    $("a.readmorebtn").toggleFuncs(function () {
        $("a.readmorebtn").text(lessText);
        $("p.more").slideToggle(0);
    },

    function () {
        $("a.readmorebtn").text(moreText);
        $("p.more").slideToggle(0);
    });
});