Show hide animate

Question

I have the following show/hide function:

    // Show/hide filters on mobile //
$("#openMobileFilters").click(function(){   
    showOrHideFilter(true);
});
$(".closeFilters").click(function(){
    showOrHideFilter(false);         
}); 

function showOrHideFilter(show) {
    $("#results-container, .navbar-inverse" ).toggleClass( "hidden-xs", show );
    $("#filter-column").toggleClass("hidden-xs", !show); 
}

I wanted to add animation when the class is toggled. Something like:

.animate({ width: 'hide' });

I was unsure of how to combine this into the function?

Many thanks

Answer 1

try to modify your function like this:

function showOrHideFilter(show) {
    $("#results-container, .navbar-inverse" ).toggleClass( "hidden-xs", show );
    $("#filter-column").toggleClass("hidden-xs", !show); 
        if (show){
            $(this).animate({ width: 'hide' });
        }
}

Hope it was helpfull.