将div高度切换为自动（100％）并返回到已定义的？

Question

I'm building movie review site using WordPress, I'm not so good with jquery or javascript, with php I can "fight". I would need some help from you guys. This is first question I actually couldn't find answer on stackoverflow, and I need it badly.

I have this code:

<div class="movie_cast">
<span class="movie_cast_bold">Cast: </span>John Hurt, Peter Mullan, Ingrid Bolsø Berdal, Ian Whyte, Robert Whitelock
</div>

My css is:

.movie_cast {
float: right;
width: 35%;
margin-left: 2%;
line-height: 15px;
font-family: 'Lucida Grande',Arial,Helvetica,Verdana,sans-serif;
font-size: 12px;
height: 20px;
overflow: hidden;
}

Whats some simple jquery with button that I can toggle my cast from height: 20px to full height height: auto, and also return after clicked back. With height of 20px it should show "more", and with full or auto height it would show "less" and return to height of 20 px.

Answer 1

You can try this :

$(function(){
    $('input[type="button"]').click(function(){
       var cssht = $('.movie_cast').height();
       if(cssht=='20')
           $('.movie_cast').height('auto');
        else
            $('.movie_cast').height('20px');
    });
});

Demo