Animating addClass & removeClass with jQueryUI or CSS

Question

My fiddle: http://jsfiddle.net/b2stctr8/

The goal is to expand and collapse the target div by clicking on an image. My method is to start with a collapsed class with display:none. The javascript removes the class and allows the div to be displayed. The code works, but I've had a miserable time trying to animate the action. I'm loading jQuery and jQueryUI. This is my current code:

$('img.activator').click(
function(){
    if ($('#mobileSelectors').hasClass('collapsed')) {
        $('#mobileSelectors').removeClass('collapsed', 200);
    } else {
        $('#mobileSelectors').addClass('collapsed', 200);
    }
});

Looking back at similar situations people have had on StackOverflow, I tried rearranging my function for switchClass and also with toggleClass as mentioned in solutions. I was unsuccessful. Any suggestions on how this function can be animated?

score 1 · Accepted Answer · answered Dec 12 '14 at 22:00

I think I got what you were going for.

JSFiddle

I have added a bunch of CSS to your code. I will try my best to explain.

#mobileSelectors {
    background: yellow;
    height:auto;
    max-height:500px;
    text-align:center;
    display:block;
    line-height:100px;
    margin:0;
    -webkit-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
}

#mobileSelectors.collapsed {
    max-height:0px;
    overflow:hidden;
}

First off, you only need to define the transition on the based element. So I have removed it from the .collapsed selector.

You also cannot transition the display property. So instead you will need to transition a different property. In my Fiddle. I set the max-height of the collapsed state to "0" with overflow:hidden. This causes the container to not show.

On the selector for the object you reset these values by setting max-height to something higher than the container will ever be. In this case I used 500px and then setting height to auto. What this does is allows the container to take the height of it's content rather than setting a hard height.

I also changed the transition values to only transition max-height rather than all.

-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;

Finally, i changed the Jquery to use .toggleClass.

$('img.activator').click(
    function(){
        $('#mobileSelectors').toggleClass("collapsed");
    }
);

Thanks Chapster. This works really well since my content for the div will not change all that often. I hadn't thought of experimenting with different properties but now that you mentioned it, it makes sense that the transition would only work on a height adjustment, not display values. Your explanation was 100% perfect, thank you. Implemented and works. — Kazoou, Dec 12 '14 at 22:20

score 0 · Answer 2 · answered Dec 12 '14 at 21:25

Can you be a little more descriptive on the type of animation that your looking for? Are you looking to animate using the CSS or JQuery? There are many ways to go about it I'm just trying to find the best possible one for your particular case.

Some helpful links if your trying to use the javascript methods, Jquery Animate API. Another that showcases how to use animations comes from, web tuts I also found it quite useful when attempting to look at live working examples in codepen.

I placed animations in CSS on the class (and the div) thinking they'd inherently work. Not having much luck with that. — Kazoou, Dec 12 '14 at 21:30

Animating addClass & removeClass with jQueryUI or CSS

2 Answers2