Jquery and CSS transition overflow

Question

I been struggling with this problem for a few days now, I have this page....http://new.sekanskin.com/what-we-do/

In this page I have bunch of buttons, when you click on one of the buttons I want it to show a certain section.

I have tried using toggle and initially hiding them, but I am using Wordpress WPBarkery and initally hiding an element does not work well with it.

I have tried using css transitions for max-height, but that messes up the parallax below each sections.

Currently I am able to show / hide the section via toggleClass, but all I need to to do is add an animation to it, how would I do that knowing I cant use show hide or css transition for max-height.

I have also tried transform scaleY with transition, but I don't like how it makes my content squished when transitioning from 0 to 1.

CSS

.section1, .section2, .section3, .section4, .section5, .section6, 
.section7 {
    overflow: hidden;
    height: 0px;
}

.toggle {
    overflow: visible;
}

I have also tried this

.section1, .section2, .section3, .section4, .section5, .section6, .section7 {
     overflow: hidden;
     transform: scaleY(0);
     transform-origin: top;
     transition: transform 0.15s ease-out;
     max-height: 0px;
}

.toggle {
     overflow: visible;
     transform: scaleY(1);
     transition: transform 0.15s ease-in;
}

jQuery

$('.architectural-films').bind('click', function(e){

$(".section1").toggleClass("toggle").promise().done(function(){ 


    $(window).trigger('resize.px.parallax');

});

return false;

});

I have also tried this little hack

setTimeout(function(){ $('section1').hide() }, 3000);

            $('.architectural-films').bind('click', function(e){

                $('section1').slideToggle("slow", function() { 

                    $(".section1").toggleClass("toggle").promise().done(function(){ 

                        $(window).trigger('resize.px.parallax');

                    });

                });

                return false;
            });

Hide the section after 3 seconds so it doesn't mess up my content, then toggle slide, then toggle the class and re-trigger the parallax. I have also tried the other way (toggle the class then toggle slide)

Answer 1

When you add your class, attach animation to that class in CSS, and you will have your transition. Animate Animate2