[Résolu] Afficher / Cacher div

Bonjour,

Je ne connais pas trop Javascript et j'aimerais pouvoir afficher ou cacher une div.
Voici le code JS que j'utilise:

function show( nom, numero )
                {
                        var divID = nom + numero;
                        if ( document.getElementById && document.getElementById( divID ) )
                                {
                                        Pdiv = document.getElementById( divID );
                                        PcH = true;
                               }
                        else if ( document.all && document.all[ divID ] )
                                {
                                        Pdiv = document.all[ divID ];
                                        PcH = true;
                                }
                        else if ( document.layers && document.layers[ divID ] )
                                {
                                        Pdiv = document.layers[ divID ];
                                        PcH = true;
                                }
                        else
                                {
                                        PcH = false;
                                }
                        if ( PcH )
                                {
                                        Pdiv.className = ( Pdiv.className == 'cache' ) ? '' : 'cache';
                                }
                }

Cache est une simple classe permettant de cacher la div .cache { display: none; }

Je m'en sert comme cela sur ma page:

<a href="javascript:show( 'div', '1' )">Afficher / Cacher</a>
<div id="div1">Coucou, je suis le texte à cacher</div>

Et ca marche nikel !
Pourquoi ce post alors ? o_O

Comme je l'ai dit plus haut, je ne connais pas beaucoup javascript, j'aimerais alors qu'au chargement de la page, le contenu de la div soit caché, mais il faut également que le contenu s'affiche si le Javascript est desactivé.
Avec ce code, à l'ouverture de la page, le contenu est affiché (je veux qu'il soit caché) et à la desactivation de Javascript le contenu est bien affiché, mais je pense que ça va changer lorsque le contenu sera cacher (?).

J'aimerais également savoir s'il est possible que je récupère la variable pour connaittre l'état de mon div (affiché/caché) pour que je puisse la manipuler avec php ?

Merci d'avance
A bientôt,
Modifié par nonoteam (16 Jan 2007 - 18:52)

Çà me semble être un bien grand code pour pas grand chose ...

function showOrHide(id, type){
 if(document.getElementById(id).style.display==type) document.getElementById(id).style.display='none';
 else if(document.getElementById(id).style.display=='none') document.getElementById(id).style.display=type;
}

Attends la suite arrive ...
Modifié par CNeo (07 Jan 2007 - 17:44)

CNeo a écrit :
Çà me semble être un bien grand code pour pas grand chose ...

Disons que c'est un code qui fonctionne aussi sur les dinosaures (NS4, IE4) puisqu'il ne connaissaient pas encore getElementById.

Mais j'avoue que l'intérêt est assez limité aujourd'hui.

Pour passer des valeurs à PHP je n'ai encore jamais essayé ( il me semble que cela apparaît dans la doc PHP ), mon premier réflexe serait de mettre un input caché mais çà peut poser des problèmes d'envoi ... donc là dessus je ne peux pas trop t'aider pour l'instant.

Pour que le div s'affiche quand Javascript est désactivé son display css doit être sur block ( ou inline, ... ) ce qui est la valeur d'origine de l'élément donc pas besoin d'y toucher ...
Pour que le div soit caché si javascript est activé et pour que le lien ne s'affiche également qu'à cette condition je te conseille de faire une fonction start_jsStyle qui change la classe de body ou d'un autre élément de .jsOff ( valeur par défaut ) vers .jsOn ( qui te permet d'afficher le lien ( qui soit dit en passant devrait plutôt être un bouton ) et de masquer le div en question ).

En CSS :

.jsOn #div1 {display: none;}
.jsOn #button {display: block;}

.jsOff #button {display: none;}

Ah oui ... l'argument type est le type de boîte qu'est l'élément quand il est affiché ( block, inline, ... ).

Ok merci bien pour ces précisions.
Je ne comprends pas encore suffisamment la méthode mais je vais creuser ca.
Merci.

nonoteam a écrit :
Ok merci bien pour ces précisions.
Je ne comprends pas encore suffisamment la méthode mais je vais creuser ca.
Merci.

Attends un peu je dois pouvoir t'aider pour la fonction start_jsStyle

On peut soit englober ton bouton et ton div dans un autre div pour appliquer la classe .jsOn soit appliquer cette classe directement à la balise body ...

Avec la balise body :

function start_style(){
 var bodyMarkup=document.getElementsByTagName('body')[0];
 if(bodyMarkup.className==='jsOff'){
  bodyMarkup.className='jsOn';
 }
}

Avec un div englobant tes deux éléments :

function start_jsStyle(id){
 var divMarkup=document.getElementById(id);
 if(divMarkup.className==='jsOff'){
  divMarkup.className='jsOn';
 }
}

Ensuite tu appelles l'une de ces deux fonctions dans le onload de la balise body.

ATENTION : Ne pas oublier de mettre la classe jsOff sur le div qui englobe ou sur la balise body sinon çà ne marchera pas ...
Modifié par CNeo (07 Jan 2007 - 18:25)

Merci je l'ai ajouté, le code que j'ai posté precedement est-il correct car il ne marche pas, je me suis un peu embrouillé je crois ?

erf... bon, sans tomber dans des solutions trop complexes...

Le lien qui active l'affichage n'est utile que si Javascript est activé donc il faut le créer via JS.

Un exemple de code (qui pourrait être amélioré):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

@media screen, projection
{
	
	.Cache { display: none; }
}

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[

function Display(sId)
{	
	var oDiv = document.getElementById(sId),
	    oA = document.createElement('a'),
	    oTxt = document.createTextNode('Montrer');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.body.insertBefore(oA, oDiv);

	oDiv.className = 'Cache';
	oA.onclick = function()
	{
		if(this.firstChild.data === 'Montrer')
		{
			this.firstChild.data = 'Cacher';
			this.href = '#cacher';
		}
		else
		{
			this.firstChild.data = 'Montrer';
			this.href = '#montrer';
		}
		oDiv.className = oDiv.className === 'Cache' ? '' : 'Cache';
		return false;
	}
}
window.onload = function() { Display('madiv'); };

		//]]></script>
	</head>
	<body>

<div id="madiv">
	<p>coucou<p>
</div>

	</body>
</html>

Wahou, merci ca marche superbement.
Je vais me plonger dans le code et bien me mettre dans Javascript.
Je vais aussi voir pour passer la variable à php avec un input hidden.
Merci de votre aide

Bonjour,

J'aimerais savoir s'il est possible d'ajouter cet effet à la balise ul plutôt, j'ai pas mal de divs et ça cafouille un peu avec les bloc parents-enfants.
Car pour le moment j'ai:

<div id="global'>

<h1>Ma liste</h1>
<div id="divacacher">

<ul id="liste">
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

</div>

</div>

Par exemple dans #global j'ai un background bleu avec une bordure et un titre centré h1, le bloc div #liste est à cacher avec le lien qui apparaît (Afficher/Cacher) mais il restera toujours la div #global avec le titre h1.

Mais j'aimerais faire plus simple, c'est à dire:

<div id="global'>

<h1>Ma liste</h1> <h2>Afficher/Cacher</h2>

<ul id="liste">
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

</div>

Comment appliquer le cache directement à l'élément ul, aussi comment mettre le lien Afficher/Cacher directement dans une balise h2 (qui se trouverait à droite de h1, enfin bref..) puisque le lien est créé en javascript ? rajouter un paramètre this.parametre_balise = 'h2'; ?

COOKIE:

En fait je ne vais pas essayer de faire passer ma variable à php,
je pense créer un cookie à la fin de la fonction qui enregistre l'état de ma variable ('montre' ou 'cache'). Puis ajouter au début une fonction qui affecte la valeur du cookie à ma div, seulement s'il existe, autrement on suit le cours du script précédent... état 'montre' si JS est désactivé, état 'cache' si JS est activé mais qu'il n'y a aucun cookie.

Je ne sais pas s'il y a une fonction correspondante à if(isset($_COOKIE['etat'])) en quelque sorte ?

J'ai trouvé ce lien sur les cookies, je vais le potasser.
http://www.actulab.com/les-cookies-en-javascript.php[/url]

D'avance Merci,
A bientôt,
Modifié par nonoteam (08 Jan 2007 - 19:32)

Avec le code de koala64 çà donnerait :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

@media screen, projection
{
	
	.Cache { display: none; }
}

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[

function Display(sId)
{	
	var oElement = document.getElementById(sId),
	    oA = document.createElement('h2'),
	    oTxt = document.createTextNode('Montrer');
	oA.appendChild(oTxt);
	document.body.insertBefore(oA, oElement);

	oElement.className = 'Cache';
	oA.onclick = function()
	{
		if(this.firstChild.data === 'Montrer')
		{
			this.firstChild.data = 'Cacher';
		}
		else
		{
			this.firstChild.data = 'Montrer';
		}
		oElement.className = oElement.className === 'Cache' ? '' : 'Cache';
		return false;
	}
}
window.onload = function() { Display('liste'); };

//]]></script>
</head>
<body>

<ul id="liste">
 <li>blabla</li>
 <li>blabla</li>
 <li>blabla</li>
 <li>blabla</li>
</ul>

</body>
</html>

( Sauf erreur de ma part bien sûr ... )

Tu peux faire ainsi :

function Display(sIdCont, sId)
{	
	var oElem = document.getElementById(sId),
	    oA = document.createElement('a'),
	    oTxt = document.createTextNode('Montrer');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.getElementById(sIdCont).insertBefore(oA, oElem);

	oElem.className = 'Cache';
	oA.onclick = function()
	{
		if(this.firstChild.data === 'Montrer')
		{
			this.firstChild.data = 'Cacher';
			this.href = '#cacher';
		}
		else
		{
			this.firstChild.data = 'Montrer';
			this.href = '#montrer';
		}
		oElem.className = oElem.className === 'Cache' ? '' : 'Cache';
		return false;
	}
}
window.onload = function() { Display('test', 'liste'); };

La première variable de la fonction Display est l'id du conteneur et la seconde variable est l'id de l'élément que tu souhaites faire apparaître ou disparaître.

Le lien s'insère juste au dessus de l'élément que tu souhaites contrôler. (Si tu mets un titre avant la liste, le lien s'insérera entre le titre et la liste)
Modifié par koala64 (09 Jan 2007 - 10:37)

Salut,
Je ne vois pas pourquoi mais cela ne fonctionne pas
Tout apparaît le lien et la liste.

a écrit :
Le lien s'insère juste au dessus de l'élément que tu souhaites contrôler. (Si tu mets un titre avant la liste, le lien s'insérera entre le titre et la liste)

Je ne peux pas faire oA = document.createElement('h2'), et le positionner à coter du titre h1 avec un css ?

Merci,

Autant pour moi... Je viens d'éditer le code... (Je n'avais pas testé et il y a avait une petite erreur dans les noms de variables)

C'est corrigé.

Pourquoi créer un h2 ? Ce n'est pas cliquable ce qui fait que dès lors, tu empêches ceux qui naviguent au clavier d'y accéder.

Si ce n'est que pour l'apparence du lien, tu peux la changer via CSS.