SO - 16473299

by Arun P Johny

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
    		<div id="resize01">
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
                <a href="#">Test links</a>
    		</div>
    		<a href="#" id="viewmore">+ View more</a>
    		<a href="#" id="viewless">- View less</a>

CSS

a {display:block;line-height:1em;}
#resize01 {height:190px;overflow:hidden;background:#eee;}
#viewmore, #viewless {
    margin:5px 0 0 0;
    padding:3px 5px;
    background:#598296;
    color:#fff;
    width:90px;
    display:inline-block;
    text-decoration:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

JavaScript

$('#viewless').hide();
$('#viewmore').click(function(){
    var el = $('#resize01'),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 500);
    $('#viewmore').hide();
    $('#viewless').show();
    
    $.cookie('viewmore', true);
    
});

$('#viewless').click(function(){
    $('#resize01').animate({height: '190'}, 500);
    $('#viewmore').show();
    $('#viewless').hide();
    
    $.cookie('viewmore', false);
});

if($.cookie('viewmore') == 'true'){
    $('#viewmore').click();
} else {
    $('#viewless').click();
}