Javascript Afficher/Caché/Dé-afficher...

Question

Alex.Laumme

26 Jun 2011 à 13:03

Bonjour,

Je n'ai pas trouver solution à mon problème parmis les autres postes donc je me permet de poster ici.

Je ne suis pas familier en Javascript, mais pas du tout. En fait ce que je souhaiterais faire c'est simple pour vous je pense.

J'ai besoin de 4 liens en tout. On va les nommer Option a, b, c ,d pour faire simple ici. Et quand je clique sur l'option A par exemple, le contenu d'un Div s'affiche, mais lorsque par exemple, je clique sur l'option B ou C ou D enfin peut-importe, ce qu'avais affiché l'option A se cache pour laisser place au nouveau contenu.

Et ça dans tout les sens entre les quatres options.

La seule chose que j'ai pu trouvé c'est ça :


<script> 
function visibilite(thingId) 
{
	var targetElement;targetElement = document.getElementById(thingId) ;if (targetElement.style.display == "none")
	{targetElement.style.display = "" ;} 
	else {targetElement.style.display = "none" ;}
}
</script>

Et l'HTML


<a href="javascript:visibilite('opta');">afficher/masquer 01</a>
<div id="opta" style="display:none;">
Coucou
</div>		

<a href="javascript:visibilite('optb');">afficher/masquer 02</a>
<div id="optb" style="display:none;">
Coucou
</div>

<a href="javascript:visibilite('optc');">afficher/masquer 03</a>
<div id="optc" style="display:none;">
Coucou
</div>

<a href="javascript:visibilite('optd');">afficher/masquer 04</a>
<div id="optd" style="display:none;">
Coucou
</div>

Là ça se cache bien et tout, mais si clique sur l'option A (le contenu A s'ouvre) et qu'après je clique sur l'option B, le contenu B s'ouvre sans fermer le contenu A.

J'espère être assez claire dans mes explications.

D'avance merci à ceux qui pourront m'aider.

Cordialement Alex Laumme

keden

26 Jun 2011 à 14:23

Salut à toi !

Je suis également un novice en JavaScript, et j'essaye de faire la même chose que toi, je t'invite à regarder mon post dans cette même partie du forum.

J'ai eu de l'aide sur ce forum, et le résultat est presque ce que j'attend, il reste un bug cependant. J'attends de savoir si quelqu'un à une idée de comment je pourrais le corriger.

J'ai également laissé un lien pour voir ce que ça donne en direct Smiley langue

lddsoft

26 Jun 2011 à 14:42

Bonjour Alex.Laumme,

Sans jQuery et effet de fading, et tout en restant dans le cadre de ta recherche, voici un code qui devrait t'inspirer. Le reste n'est plus qu'une question de mise en page et de style:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>afficher-masquer</title>
    <style type="text/css">
	/*<![CDATA[*/
     .divs {display:none;background:#F7F7F7;border:1px solid blue;width:200px;padding:5px;margin:10px;}
    /*]]>*/
    </style>
    <script type="text/javascript">
	//<![CDATA[
	function visibilite(id)	{
		var divs = document.getElementsByTagName('div');
		for(var no=0;no<divs.length;no++){
			if(divs[ no].className=='divs'){ // on cible les divs dont la class est 'divs'
				divs[ no].style.display = "none"; // on les masque tous
			}
		}	
		document.getElementById(id).style.display = "block"; // on affiche le div appelé
	}
    //]]>
    </script>
  </head>
  <body>
	<a href="javascript:visibilite('opt1');">afficher/masquer 01</a><br />
	<div id="opt1" class="divs">Coucou A</div>         
	<a href="javascript:visibilite('opt2');">afficher/masquer 02</a><br />
	<div id="opt2" class="divs">Coucou B</div> 
	<a href="javascript:visibilite('opt3');">afficher/masquer 03</a><br />
	<div id="opt3" class="divs">Coucou C</div> 
	<a href="javascript:visibilite('opt4');">afficher/masquer 04</a><br />
	<div id="opt4" class="divs">Coucou D</div> 
  </body>
</html>

Cordialement

EDIT: je remarque maintenant en relisant ton 1er post que ce n'est pas l'effet recherché. Ce qui m'a induit en erreur, c'est ton propre code, où il y a 4 div bien distincts. Or il me semble comprendre que tu désirerais que tout s'affiche dans le même div. Est-ce bien ça?
N.B.: il est aussi possible d'alimenter le div via AJAX.
Modifié par lddsoft (26 Jun 2011 - 15:03)

lddsoft

26 Jun 2011 à 15:20

Voici en simple Javascript (1 seule ligne!) ce que ça donne pour charger le même div avec le contenu de divs différents selon le lien sur lequel on clique :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>afficher-masquer</title>
    <style type="text/css">
	/*<![CDATA[*/
     .divs {display:none;}
	 #receveur {
		 position: absolute;
		 width:400px; 
		 height:250px; 
		 top:60px; 
		 left:300px; 
		 border:1px solid gray; 
		 padding:10px; 
		 background-color:#F7F7F7
	 }
    /*]]>*/
    </style>
    <script type="text/javascript">
	//<![CDATA[
	function visibilite(id){document.getElementById("receveur").innerHTML = document.getElementById(id).innerHTML;}
    //]]>
    </script>
  </head>
  <body>
	
	<div id="receveur">&nbsp;</div>
	
	<a href="javascript:visibilite('opt1');">afficher/masquer 01</a>&nbsp;&nbsp;
	<div id="opt1" class="divs"><b>Coucou A</b></div>         
	<a href="javascript:visibilite('opt2');">afficher/masquer 02</a>&nbsp;&nbsp;
	<div id="opt2" class="divs"><i>Coucou B</i></div> 
	<a href="javascript:visibilite('opt3');">afficher/masquer 03</a>&nbsp;&nbsp;
	<div id="opt3" class="divs"><u>Coucou C</u></div> 
	<a href="javascript:visibilite('opt4');">afficher/masquer 04</a>&nbsp;&nbsp;
	<div id="opt4" class="divs"><b><i><u>Coucou D</u></i></b></div> 
  </body>
</html>

Alex.Laumme

27 Jun 2011 à 18:29

Bonjour à vous deux. Merci keden je vais regardé ton post voir un peut tout cela.

Merci pour ta réponse aussi lddsoft, j'ai pas pu repassé hier, problème avec le pc.

En fait c'était bien la première idée qui était la bonne, chaque div à bien un contenu différent.

Et si l'ont clique sur le le lien A ce sera le div A qui s'affichera, si c'est le lien B qui est cliqué le div B s'affiche en réduisant le div A.

Bon je vais essayé un peut ce que tu m'a donné et voir si je m'en sors.

Je repasse tout à l'heure quand j'aurais testé tout cela.

Encore merci.

Alex Laumme

EDIT

Alors, le premier des codes que tu m'a donné était le bon. Finalement je n'en aurais eu besoin que de trois div.

Après avoir ranger mon code comme il fallait de mon côté, j'ai installé ce bout de code autour des miens pour avoir l'effet voulu bien sûr. Mais j'ai rajouté un tout petit truc à ton code et je voulais si niveau compatibilité entre navigateur c'est le plus correct.


    <style type="text/css">/*<![CDATA[*/.divs {display:none;background:#F7F7F7;border:1px solid blue;width:200px;padding:5px;margin:10px;} /*]]>*/</style>

    <script type="text/javascript">

	//<![CDATA[

	function visibilite(id)	{

		var divs = document.getElementsByTagName('div');

		for(var no=0;no<divs.length;no++){

			if(divs[ no].className=='divs'){ // on cible les divs dont la class est 'divs'

				divs[ no].style.display = "none"; // on les masque tous

			}

		}	

		document.getElementById(id).style.display = "block"; // on affiche le div appelé

	}

    //]]>

    </script>


	<a href="javascript:visibilite('opt1');">Section 1</a><br />

	<div id="opt1" class="divs" style="display:block;">Contenu A</div>         

	<a href="javascript:visibilite('opt2');">Section 2</a><br />

	<div id="opt2" class="divs">Contenu B</div> 

	<a href="javascript:visibilite('opt3');">Section 3</a><br />

	<div id="opt3" class="divs">Contenu C</div>

J'ai rajouté

style="display:block;"

au DIV N°1, afin qu'il s'affichent au chargement de la page mais qu'il se cache bien lorsque l'on ouvre un des deux autres div.

Cela marche parfaitement mais vis à vis de la compatibilité cela ne pause aucun soucis ? Malheureusement je n'ai pas tout les navigateurs pour tester ça Smiley ohwell

Sinon une question comme ça, je me suis toujours demandé ce que le //<![CDATA[ //]]> pouvait servir ?

J'en vois peut souvent mais quand même histoire de savoir ^^

Encore merci en tout cas.
Modifié par Alex.Laumme (27 Jun 2011 - 19:57)

lddsoft

28 Jun 2011 à 13:57

Alex.Laumme a écrit :
Sinon une question comme ça, je me suis toujours demandé ce que le //<![CDATA[ //]]> pouvait servir ?

Après une longue recherche de 12 secondes sur Google, tu tombes sur cette page Smiley cligne

. Il y a des explications plus théoriques sur d'autres sites, mais c'est souvent en anglais.

Alex.Laumme a écrit :
Cela marche parfaitement mais vis à vis de la compatibilité cela ne pause aucun soucis ?

Où verrais-tu un souci?
Modifié par lddsoft (28 Jun 2011 - 14:06)

jahllya

3 Jul 2011 à 15:23

Salut
Iddsoft, j'ai essayé ton deuxième code avec les 4 liens en haut de page et dont le contenu apparaît dans la div.
Ça marche très bien quand tout le code est sur la même page mais j'aimerai savoir s'il est possible de cliquer sur un lien et de faire apparaître le contenu sur une autre page?

~~supprimé~~

3 Jul 2011 à 16:11

Bonjour à toutes et à tous,

j'ai repris l'excellent code de IDDSOFT que j'ai adapté à la demande de Alex Laumme !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>afficher-masquer</title>
<style type="text/css">
.divs	{ display 		: none;	}
a		{ margin-right	: 25px;	}

#receveur {
	position			: absolute;
	top					: 60px; 
	left				: 300px; 
	width				: 400px; 
	height				: 250px; 

	background-color	: #F7F7F7;
	border				: 1px solid gray; 
	padding				: 10px; 
}
</style>
<script type="text/javascript">
function visibilite (id)
{
	var xx = document.getElementById("receveur").getElementsByTagName("div");

	for (var i=0; i<xx.length; i++)
		xx.item(i).style.display = "none";

	document.getElementById(id).style.display = "block";
}
</script>
</head>

<body>
	<a href="javascript:visibilite('opt1');">afficher/masquer 01</a>
	<a href="javascript:visibilite('opt2');">afficher/masquer 02</a>
	<a href="javascript:visibilite('opt3');">afficher/masquer 03</a>
	<a href="javascript:visibilite('opt4');">afficher/masquer 04</a>

	<div id="receveur">
		<div id="opt1" class="divs"><b>Coucou A</b></div>
		<div id="opt2" class="divs"><i>Coucou B</i></div>
		<div id="opt3" class="divs"><u>Coucou C</u></div>
		<div id="opt4" class="divs"><b><i><u>Coucou D</u></i></b></div>
	</div>
</body>
</html>

@+

Sujet clos