I have created a function which duty is to Show more text. But i cannot create a Show less to show less my text

i have the following html

<div class="item"> Ronaldinho joined Barcelona in 2003 and inherited the iconic number from Argentine midfielder Juan Roman Riquelme - who was sent on loan to Villarreal for two seasons.The Brazilian star left after six years with the club, scoring almost 100 goals in just over 200 appearances And Messi has revealed in an interview with Barca TV that Ronaldinho promised him the No.10 shirt months before he announced he was leaving. </div>

and the following Javascript

$(function(){ /* to make sure the script runs after page load */

$('.item').each(function(event){ /* select all divs with the item class */

    var max_length = 150; /* set the max content length before a read more link will be added */

    if($(this).html().length > max_length){ /* check for content length */

        var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
        var long_content    = $(this).html().substr(max_length);

        $(this).html(short_content +
                     '<a href="#" class="read_more"><br/>Read More</a>'+
                     '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */

        $(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */

            event.preventDefault(); /* prevent the a from changing the url */
            $(this).hide(); /* hide the read more button */
            $(this).parents('.item').find('.more_text').show(); /* show the .more_text span */

also JSfiddle: my jsfiddle link here

so i want to create a show less to hide my text how can i do that?