Question

I have the following code but I’m building a responive site so the height needs to be dynamic to the content. It’s set at 0 so the div appears closed then on click it needs to set the height. Can I set this in the CSS (using different heights with media queries) and have it pulled in?

$("#contactArea").css('height', '0px');

$("a.contact").toggle( 
            function () { 
                $("#contactArea").animate({height: "180px"}, {queue:false, duration: 800, easing: 'easeOutBack'}) 
            }, 
            function () { 
                $("#contactArea").animate({height: "0px"}, {queue:false, duration: 800, easing: 'easeOutBack'})  
            } 
    ); 

Many thanks.

Answer 1

An easy way to do this is to define a class for the closed and opened divs, with the responsive css assigned to the open class div. Then onclick you can use jQuery to change the class of the div with a command like this

$("#contactArea").attr('class', 'newClass');