jquery - Reset height of a div after expansion with jquery

Question

I wanted to create an expanding div when the user clicks on it so that they can see the rest of the information. I have managed to do that. What I want to do now is to make it so the height of the div changes when the user clicks on the div again.

Here is my script:

$(".module").one('click', function () {
    $(this).height(400)
        .css({
        cursor: "auto"
    });
});

Here is my css:

.module {
    width:270px;
    height:200px;
    float:left;
    padding:5px;
    overflow:hidden;
    cursor:pointer;
}

Answer 1

混合 jQuery 和 CSS 有一个简单的方法。试试这个，把那些 CSS ：

.module {
    width:270px;
    height:200px;
    float:left;
    padding:5px;
    overflow:hidden;
    cursor:pointer;
}

.module.clicked{
    height : 400px;
    cursor : auto;
}

然后使用此代码：

$('.module').on('click', function(){
    $(this).toggleClass('clicked');
})

工作小提琴：http: //jsfiddle.net/2NeD2/