Montrer/cacher un div

Commenter

Contenu du snippet

Ce code permet de montrer et de cacher un div. Ce code n'est pas de moi. J'ai juste effectuer une adaptation pour que cette fonction supporte IE7.

appel de la fonction :

// nom du div a cacher/montrer
<script>var popup1="popup1";</script>

// lien qui permet l'effet voulu
<a href="javascript:;" onclick="Suite(this,popup1)"id="pop1">
<imgsrc='../../images/bt-close.gif'> // image si vous voulez
</a>

// on défini le div
<div id="popup1" name="popup1" style="text-align:center;overflow:hidden;height:500px;border: #000000 2px solid;">

Source / Exemple : 


function Suite(lien,affiche)
{
var objet = document.getElementById(affiche); // entre id div que tu veux faire apparaître !
if(objet.style.display == "none" || !objet.style.display)
{
        objet.style.display = "block";
	objet.style.overflow = "hidden"; 
	lien.innerHTML = "<img src='../../images/bt-open.gif'>";
	       
	var hFinal      =     560;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
	var hActuel     =     0;	 	//Hauteur initiale (la hauteur dès le début !)
	var timer;
	var fct =        function ()
	{
	      hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
					
	      objet.style.height     =	 hActuel      +     'px';
					
	      if( hActuel > hFinal)
	      {
	          clearInterval(timer);   //Arrête le timer
	          //objet.style.overflow    =   'inherit';
	      }
        };
	fct();
	timer = setInterval(fct,40);    //Toute les 40 ms
			
        }else if(objet.style.display == "block")
	{
	        var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
	        var hActuel     =     560;	 	//Hauteur initiale (la hauteur dès le début !)
	        var timer;
	        var fct =        function ()
	        {
	                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
	                objet.style.height     =	 hActuel      +     'px';
					
	                if( hActuel == 20)
	                {
	                        clearInterval(timer);   //Arrête le timer
	                        //objet.style.overflow    =   'inherit';
							objet.style.display     =   "none";
	                }
	        };
	        fct();     
			timer = setInterval(fct,40);    //Toute les 40 ms
			lien.innerHTML = "<img src='../../images/bt-close.gif'>";
		}
}

Conclusion :


FireFox : Toutes versions
Mozilla : 1 et +
Netscape Navigator : 6 et +
Internet Explorer : 5 et +

// rapide, efficace, simple a modifier... amusez vous bien avec //

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_keket)