<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
    .content {
    overflow: hidden;}
</style>

<div>
    <div class="content">
        <p>Контент.</p>
    </div>
    <button class="show-hide">Показать</button>
</div>

<script>
    var halfText = $('.content').innerHeight() / 4,
    textHeight = $('.content').innerHeight();
    $('.content').css('height', $('.content').innerHeight() / 4);
    $('.show-hide').click(function() {
    if( $('.content').innerHeight() == halfText ) {
    $('.content').animate({ height: textHeight }, 500);
    $(this).text('Скрыть');
    } else {
    $('.content').animate({ height: halfText }, 500);
    $(this).text('Показать');
    }
    });
</script>