Espandere e comprimere testo con javascript e CSS tramite un link

[Mugiwara88]

Ho trovato questo link ( http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/ )dove c'è esattamente quello che voglio ottenere, però è scritto in JQuery qualcuno mi aiuterebbe a renderlo puro javascript?
Qui la demo del link ( http://viralpatel.net/blogs/demo/jquery/show-more-link-shortened-content/ )

 

[criric]

E' solo un inizio, vedi se riesci a completarlo

<style>
    a {
        color: #0254EB
    }
    a:visited {
        color: #0254EB
    }
    a.morelink {
        text-decoration:none;
        outline: none;
    }
    .morecontent span {
        display: none;
    }
    .comment {
        width: 400px;
        background-color: #f0f0f0;
        margin: 10px;
    }
</style>
<div class="comment">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<script>
    var commenti = document.getElementsByClassName("comment");
    var testi = new Array();
    for(var i = 0; i < commenti.length;i++){
        testi[i] = commenti[i].innerHTML;
    }
    var limitetesto = 100;
    
    for(var i = 0; i < commenti.length;i++){
        if(testi[i].length > limitetesto) {
            var testo = testi[i].substr(0,limitetesto) + "... <a onclick='espandi(" + i + ")' href='#' class='morelink'> leggi </a>";
            commenti[i].innerHTML = testo;
        }
    }
    function espandi(i) {
        commenti[i].innerHTML = testi[i];
    }
</script>