More Less

<div class="whole-content">
<div>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </div>
 
  <div style="display:none;" class="more-content">
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </div>
  <a href="#" class="more-less-button">More</a>
</div>

jQuery

$('.more-less-button').click(function(ev) {
    ev.preventDefault();
    $(this).closest('.whole-content').find('.more-content').slideToggle();
    var text = ( $(this).text().toUpperCase() =='MORE') ? 'Less' : 'More';
    $(this).html(text);
});

=================

<div class="container-area">
<p>
<div class="short-description">Short Content</div>
<div class="full-description" style="display: none">Full Content Full Content</div>
</p>
<a href="#" class="readmore read-more-less read"><span>+</span>Read More</a>
</div>

 $(".read-more-less").click(function (e) {
        e.preventDefault();
        $(this).parent().find('.short-description').slideToggle();
        $(this).parent().find('.full-description').slideToggle();

        $(this).toggleClass("read");
        var $read_more_text = '<span>+</span>Read Less';
        if($(this).hasClass('read')){
            var $read_more_text = '<span>+</span>Read More';
        }
        $(this).html($read_more_text);
    })