Montrer/cacher un div

Soyez le premier à donner votre avis sur cette source.

Snippet vu 27 382 fois - Téléchargée 20 fois

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

Ajouter un commentaire

Commentaires

cs_JossBeaumont
Messages postés
2
Date d'inscription
mercredi 27 février 2013
Statut
Membre
Dernière intervention
27 février 2013

Boujour, ça m'intéresse beaucoup cette application, mais je ne sais pas comment la lancer. J'ai copier les codes en cliquant sur "copier dans le presse papier" puis je les ai collés dans un fichier html et je l'ai lancé et il ne se passe rien; il manque sûrement quelques choses dans mon fichier html pour que ça marche, mais quoi? Est ce que quelqu'un peut m'aider please...J'aimerais avoir les codes complets du fichier html sinon je suis perdu. Comme vous l'avez remarqué, je suis un débutant. Merci d'avance.
wiby35
Messages postés
39
Date d'inscription
lundi 27 août 2007
Statut
Membre
Dernière intervention
11 avril 2010

Vraiment génial le script...
denchamanie
Messages postés
2
Date d'inscription
lundi 22 mai 2006
Statut
Membre
Dernière intervention
3 septembre 2008

Bonjour, pour avoir l'effet "animé de l'ouverture d'une div j'ai pas trouvé mieux que ce script, c'est déjà pas mal. Mais comme Quiche13, j'aimerais bien que la div n'est pas une hauteur fixe mais une en fonction du contenu !
Quelqu'un a la solution ? Une direction vers une autre code (j'ai bien fouillé) !
Super merci d'avance
PS : dans la balise
j'y ai ajouté dans style display:none;
:)
CSIBern
Messages postés
44
Date d'inscription
dimanche 3 décembre 2000
Statut
Membre
Dernière intervention
21 mai 2014

Autant pour moi, j'avais mal recopié overflow:hidden dans le DIV, désolé.
CSIBern
Messages postés
44
Date d'inscription
dimanche 3 décembre 2000
Statut
Membre
Dernière intervention
21 mai 2014

Bonjour,

C'est bien beau cette DIV qui se réduit, elle marche bien ... tant que je n'y insère rien dedans. J'y ai ajouter du texte (avec ou sans balise ) et une image et donc la réduction se fait jusqu'à la hauteur du contenu, elle ne se ferme donc pas entièrement. Du coup, je ne vois pas vraiment l'utilisé d'avoir une DIV vide.

Est-ce que j'ai fait une erreur quelque part ou est-ce tout simplement impossible de faire la même chose avec une DIV remplie ?

Sinon script sympa.
Afficher les 15 commentaires

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.