Agrandissement et reduction d'une div onclick

Bonjour,

Voila j'aimerais réduire et agrandir le contenu d'une div lorsque qu'on clique sur un petit icon +/- d'une barre de navigation, ça marche pas terrible ce que j'ai fait pourtant ça ma semble pas mal....

Petite préxcision ma div contient un tableau.

Voila le code:

    <div id=\"titre_type_vin_table\" style=\"height:20px;background-color:#FFFFFF;\" onclick=\"agrandir_admin('type_vin_table', 300, 0);\">
</div> // Barre de nav
    <div id=\"type_vin_table\" style=\"height:0px;\">...ici il y a un tableau...</div>

Les fonction:

function agrandir_admin(id, hmax, i){
    if (hmax <= i){
        i++;
        var delais = 100;
        document.getElementById(id).style.height = i+'px';
        setTimeout("agrandir_admin(id, hmax, i)",delais);
    }
}

function reduir_admin(id, hmax, i){
    if (hmax > 0){
        i++;
        hmax = hmax-i;
        var delais = 100;
        document.getElementById(id).style.height = hmax+'px';
        setTimeout("reduir_admin(id, hmax, i)",delais);
    }
}

Voila merci de votre aide

Az

Bonjour,

quelques imprécisions....
pour agrandir :

...<div     id="titre_type_vin_table"
        style="background-color:#FFFFFF;"
        onclick="agrandir_admin('type_vin_table', 300, 0);">
cliquer pour agrandir</div>       sinon on ne peut pas cliquer
<div id="type_vin_table" style="height:0px;background-color:#FFFF00;">  pour voir ce qui se passe
...ici il y a un tableau...
</div>
...

function agrandir_admin(id, hmax, i)
{
    if ( i<=hmax ){      j'ai inversé le teste
        i++;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, hmax, i); }, 100 );  sinon, c'est une chaîne de caractères et pas les valeurs qui sont transmises
    }
}

pour diminuer tu devrais être ok....

Cordialement [mon Site] [M'écrire] Bul

Coool ça marche ;)

Merci!

Par contre j'ai encore un autre problème... hmax dans mon exemple est = 300px...

Mais en réalité c'est une variable qui doit s'adapter au contenus de ma div lors de l'appel de la fonction ici:

<div id=\"titre_type_vin_table\" style=\"height:20px;background-color:#FFFFFF;\" onclick=\"agrandir_admin('type_vin_table', hmax, 0);\">

C'est peu etre plus en php qu'il faut voir ca mais aurais tu une idée?

Merci

Az

function agrandir_admin(id, i, hmax, frein, plus, moins, global){
    if (i==0){
        var hmax = document.getElementById(id).offsetHeight;
        var frein = document.getElementById(id).offsetHeight;
        document.getElementById(id).style.height = 0+'px';
        document.getElementById(id).style.position = 'relative';
        document.getElementById(plus).style.display = 'none';
        document.getElementById(moins).style.display = 'block';
        document.getElementById(global).style.backgroundPosition = 'top';
        frein = frein - 26;
    }
    if (frein>=900){
        document.getElementById(id).style.height = hmax+'px';
        document.getElementById(id).style.visibility = 'visible';
    }else if (i<=frein){
        i=i+25;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, i, hmax, frein, plus, moins, global); }, 50 );
    }else if (i<=frein+20){
        i=i+2;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, i, hmax, frein, plus, moins, global); }, 80 );
    }else if(( i<=hmax )&&(i>=frein)){
        i++;
        document.getElementById(id).style.height = i+'px';
        setTimeout( function() { agrandir_admin(id, i, hmax, frein, plus, moins, global); }, 1 );
    }else{
        document.getElementById(id).style.visibility = 'visible';
    }
}

function reduir_admin(id, i, hmax, hmaxValue, plus, moins, global){
    if (i==0){
        document.getElementById(id).style.visibility = 'hidden';
        var hmax = document.getElementById(id).offsetHeight;
        var hmaxValue = document.getElementById(id).offsetHeight;
        document.getElementById(plus).style.display = 'block';
        document.getElementById(moins).style.display = 'none';
        document.getElementById(global) .style .backgroundPosition = 'bottom';
    }
    
    if (hmax>=900){
        document.getElementById(id).style.height = 0+'px';
        document.getElementById(id).style.position = 'absolute';
        document.getElementById(id).style.height = hmaxValue+'px';        
    }else if (hmax > 0){
        i=i+25;
        hmax = hmax-i;
        document.getElementById(id).style.height = hmax+'px';
        setTimeout( function() { reduir_admin(id, i, hmax, hmaxValue, plus, moins, global); }, 50 );
    }else{
        document.getElementById(id).style.height = 0+'px';
        document.getElementById(id).style.position = 'absolute';
        document.getElementById(id).style.height = hmaxValue+'px';
    }
}

J'ai un peu la fleme de détailler mais ca marche comme je veux ;)

Merci de ton aide!

Az