CSS doesn't toggle

The following successfully toggles the div landlord_pop_up. However, it doesn't set the css property for the div landlord_pop_up on toggle. Any ideas would be much appreciated. I am try to get the popupBox height to change from 20em to 42 em on toggle.

$(function () {
    $('#toggle1').click(function () {
        $('#landlord_pop_up').slideToggle(function () {
            $(".popupBox").css({
                "height": "42em"
            });
        }, function () {
            $(".popupBox").css({
                "height": "20em"
            });
        });
    });
});

Answers


This toggles the height of the pop up box after sliding:

$(function() {
    $('#toggle1').click(function() {
        $('#landlord_pop_up').slideToggle(function(){
            $(".popupBox").toggle(function () {
                $(this).height("42em");
            }, function () {
                $(this).height("20em");
            });
        });
    });
});

according to docs slideToggle takes duration as first argument. and you are providing a function

.slideToggle(duration,callback);

so you can do something like this

$('#landlord_pop_up').slideToggle(1000, 
function () { 
 $(".popupBox").css({"height":"20em"});
 $(".popupBox").css({"height":"42em"});
});

Need Your Help

Deploying a Rails app offline and with all dependencies intact

ruby-on-rails deployment offline

My goal is to deploy an existing Rails app on a machine. Oh, and the machine is on a handful of terminals in a remote community in the north of Australia. Oh, and I can't rely on there being Internet

How do I parse HTML in Rails?

html ruby-on-rails redcloth

I have a string with html tags in it saved.