CODEWITHSUNDEEP
javascriptjqueryhtml
prettyInPink
prettyInPink

Reputation: 3419

How can I remove padding added to toggleClass element?

I am animating a hidden div with slideToggle. since it has a fixed position on top, I want to add animate the padding top of that container div 'under it' with the current height of the hidden div.

However the class toggles correctly on click, and the padding is added with the correct amount of pixels, after toggling away the class the padding remains.

How come when I apply the padding on the toggled class it keeps being there even though the class is removed on 2nd click (toggling it away)?

js:

$('#myButton').click(function(e){
    e.preventDefault();

    $('#myDiv').slideToggle( function(){

        var myDivHeight = $(this).outerHeight();

        $('.containerDiv').toggleClass('myDivOpened');

        $('.myDivOpened').css('padding-top', myDivHeight + 15);

    });


});

Thanks very much.

Upvotes: 2

Views: 8513

Answers (3)

Lain
Lain

Reputation: 3726

Your method is adding a padding-top in the style attribute of the element in the end. It does not change the class in anyway.

Would be better to add the style in a class, yet if you really want to toggle the style with jquery, this is how it works.

$('.containerDiv').toggle(function () {
    $(".containerDiv").css({paddingTop: "20px"});
}, function () {
    $(".containerDiv").css({paddingTop: "0px"});
});

Edit: I can see your logical problem and will try to elaborate.. First we have a div called containerDiv with no class and no padding. Then we set the class of it to myDivOpened and give all the elements of this class a paddingtop. Now what you do is removing the class again of the element containerDiv and expect it to remove the padding.

Why does it not remove the padding? Because you set it on the style attribute of containerDiv. You removed the class of it yet the style attribute is not really linked with that change and thus remains.

A proper solution would be to have two classes, one with the padding and one without and toggle between those two.

Upvotes: 0

prettyInPink
prettyInPink

Reputation: 3419

I think I may have found a way to do so, since many ways lead to Rome, I'm guessing this one is valid as any other (or at least hoping it is).

$('#myButton').click(function(e){
    e.preventDefault();

     var $myDiv = $('#myDiv');
     var $containerDiv = $('.containerDiv');
     var myDivHeight = $myDiv.outerHeight();

     $myDiv.toggleClass('opened');     

    $myDiv.slideToggle( function(){

        if($myDiv.hasClass('opened')){
            $containerDiv.css('padding-top', myDivHeight);
        }else{
            $containerDiv.css('padding-top', 0);
        }

    });

});

Updated fiddle

Upvotes: 0

ET2005
ET2005

Reputation: 3

@Lain: Thanks for clarifying further. You are right, the toggle leaves the padding untouched, once inserted.

You could instead try adding and deleting the class manually.
This link may help:api.jquery.com/toggleclass.

Before deleting the class, remove the padding from the class manually, then delete the class from the body.

Just pasting in some code which may help: 

$(this).click(function(e)
{
    if (!added)
    {
        $("body").addClass("myDivOpened");
        $('.myDivOpened').css('padding-top',15);
        added = true;
    } else {
        $('.myDivOpened').css('padding-top',0);
        $("body").removeClass("myDivOpened");
        added = false;
    }
});

Upvotes: 0

Related Questions