Buttons ‘More’ and ‘Less’ in jQuery

The simplest solution to the frontend developer.

HTML code:

<span class="teaser">text goes here</span>
<span class="complete"> this is the complete text being shown</span>
<span class="more">more...</span>

CSS code:

.complete{
    display:none;
}
.more{
    background:lightblue;
    color:navy;
    font-size:13px;
    padding:3px;
    cursor:pointer;
}

Magic jQuery code:

jQuery(".more").toggle(function(){
    jQuery(this).text("less..").siblings(".complete").show();    
}, function(){
    jQuery(this).text("more..").siblings(".complete").hide();    
});

Live DEMO: http://jsfiddle.net/zA23k/215/