CODEWITHSUNDEEP
jquery
user2350789
user2350789

Reputation: 47

jQuery - IF height is greater than 2 separate divs

Ok, so I asked a question earlier but didn't get the desired effect. As a result I've decided to tackle it in another way...

I'm trying to get the container to increase in height if either (or both) of the 2 panels are expanded.

var content = $("#content_container");  
var childaHeight = $('#news_events_panel').height();
var childbHeight = $('#headteachers_panel').height();

    if (content < childaHeight, childbHeight) {
        $(content).css("height", 657 + "px");
    }

This is working fine and increases the height of the container to 657px when the panels are open.

The tricky bit is the next bit...

The user can open both panels individually and the problem I'm having is that the container returns to auto height when the user closes only one of them. I need the container to return to auto ONLY if both panels are closed.

if (content > childaHeight & childbHeight) {
        $(content).css("height", "auto");
}

Basically, I need this 2nd script to read "If content is greater than childaHeight AND childbHeight, return to "auto". If not, keep height.

There's probably an easy solution, but I'm very very new to this and not really clued up on jQuery functions.

Upvotes: 0

Views: 785

Answers (1)

adeneo
adeneo

Reputation: 318182

Just add them together I suppose :

if ( content.height() > (childaHeight + childbHeight) ) {
        content.css("height", "auto");
}

Upvotes: 1

Related Questions