Raffraichir outerHeight()

Bonjour,

Voici une petit code que je trouve intéressant car il calcule la hauteur de son contenu mais problème: En responsive la hauteur n’est pas rafraichie en temps réel obliger de relancer le script.
demo

$('.btn').bind('click', function(e) { 
    e.preventDefault();
    
    var w = $('#outer');
    var f = $('.btn');
    
    if (w.hasClass('collapsed')) {
        w.css({ "max-height": $('#inner-info').outerHeight() + 'px' });
        f.addClass('action');

    } else {
        w.css({ "max-height": "0px" });
        f.removeClass('action');
    }
    w.toggleClass('collapsed');
});

Avez-vous une idée pour régler ce problème ?

Merci.

Bonjour,

Oui, il te faut utiliser l'évenement resize de ta fenêtre, et relancer le scrit à l'intérieur :

$( window ).resize(function() {
  // script de calcul de la hauteur
})

Bonjour @SolidSnake,

J'ai donc retravaillé mon script en utilisant des functions mais j'ai l'impression de me compliquer la vie ?

Demo

var isOpen = false;
var Bloc = $("#outer");
var btnBloc = $(".btn");

btnBloc.click(function () {
    if (isOpen == false) {
        openMenu();
    } else {
        if (isOpen == true) {
            closeMenu();

        }
    }
});


function openMenu() {
    isOpen = true;
    Bloc.hasClass('collapsed');
    Bloc.css({ "max-height": $('#inner-info').outerHeight() + 'px' });
    btnBloc.addClass('action');    
 
}

function closeMenu() {
    isOpen = false;
    Bloc.css({ "max-height": "0px" });    
    Bloc.toggleClass('collapsed');
    btnBloc.removeClass('action');
}


//resize Open
$(window).resize(function () {
    if (isOpen == true) {
        openMenu();
    }
});