Cacher un contenu

coastlyne -
Pitet - 15 mars 2013 à 09:08

Bonjour,
Je construis un petit site et je n'arrive par à faire afficher le contenu d'un bouton:
J'ai créé 2 boutons, quand je clique sur l'un, son contenu s'affiche en-dessous et quand je clique sur l'autre le contenu du 1er bouton s'enlève quand le contenu du 2ème s'affiche.

Pour l'instant, quand je clique sur le bouton 1, le contenu s'affiche bien et quand je clique sur le bouton 2, le contenu s'affiche à la suite du contenu du 1er bouton, voici mon code:

<!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>
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>

</head>
<body>
<input type="submit" onclick="javascript:visibilite('id_div_1'); return false;" value="Partie 1">
<input type="submit" onclick="javascript:visibilite('id_div_2'); return false;" value="Partie 2">

<div id="id_div_1" style="display:none;">
<b>Texte 1</b><br/>
</div>

<div id="id_div_2" style="display:none;">
<b>Texte 2</b><br/>
</div>

</body>
</html>

Est-ce que quelqu'un aurait une idée svp ?

Merci d'avance :)

Afficher la suite

7 réponses

gardiendelanuit Messages postés 1772 Date d'inscription Statut Membre Dernière intervention 267

Bonsoir,

Essaie

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

gardiendelanuit Messages postés 1772 Date d'inscription Statut Membre Dernière intervention 267

Enfin j'aurais plutôt fais,

<script> 
		function visibilite(toHide, toShow){
			var hide = document.getElementById(toHide); 
			var show = document.getElementById(toShow); 
			
			hide.style.display = 'none';
			show.style.display = 'block';
		};
		</script> 

	</head> 
	<body> 
		<input type="submit" onclick="javascript:visibilite('id_div_2', 'id_div_1'); return false;" value="Partie 1"> 
		<input type="submit" onclick="javascript:visibilite('id_div_1','id_div_2'); return false;" value="Partie 2">  ...

Après si tu veux avoir plus d'objet à afficher, là il faudra changer le système (= affichage dans une div et utilisation de InnerHTML)

Réponse 2 / 7
coastlyne

Bonjour,

Merci de ta réponse. J'ai entre temps trouvé une autre solution, mais comme tu dis j'ai plus que 2 objets à afficher. Voici mon code pour le moment :

<!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>
<script type="text/javascript">
function afficher_div(image)
{
switch(image){
case 'Reference':
document.getElementById

("page1").style.display="block";
document.getElementById

("page2").style.display="none";
document.getElementById

("page3").style.display="none";
break;
case 'Theme':
document.getElementById

("page2").style.display="block";
document.getElementById

("page1").style.display="none";
document.getElementById

("page3").style.display="none";
break;
case 'Principe':
document.getElementById

("page3").style.display="block";
document.getElementById

("page1").style.display="none";
document.getElementById

("page2").style.display="none";
break;
case 'Texte1':
document.getElementById

("page1.1").style.display="block";
document.getElementById

("page1.2").style.display="none";
document.getElementById

("page1.3").style.display="none";
break;
case 'Texte2':
document.getElementById

("page1.2").style.display="block";
document.getElementById

("page1.1").style.display="none";
document.getElementById

("page1.3").style.display="none";
break;
case 'Texte3':
document.getElementById

("page1.3").style.display="block";
document.getElementById

("page1.1").style.display="none";
document.getElementById

("page1.2").style.display="none";
break;
}
}

</script>

</head>
<body>
<input type="button" onclick="javascript:afficher_div('Reference'); return false;"

value="Référence" />
<input type="button" onclick="javascript:afficher_div('Theme'); return false;" value="Thème"

/>
<input type="button" onclick="javascript:afficher_div('Principe'); return false;"

value="Principe" />

<div id="page1" style="display:none;">
<div align="center">
<b><a href="" onclick="javascript:afficher_div('Texte1'); return

false;">Texte1</a></b><br/>
<div id="page1.1" style="display:none;">
<ul><li><a href="" onclick="javascript:afficher_div('Test1.1'); return

false;">Test1.1</a></li><br/>
<div id="page1.1.1" style="display:none;">
<a href="" target=_blank>Testlien1</a><br/>
<a href="" target=_blank>Testlien2</a><br/></div>
<li><a href="" onclick="javascript:afficher_div('Test1.2'); return

false;">Test1.2</a></li><br/>
<div id="page1.1.2" style="display:none;" />
<li><a href="" onclick="javascript:afficher_div('Test1.3'); return

false;">Test1.3</a></li><br/>
<div id="page1.1.3" style="display:none;" />
<li><a href="" onclick="javascript:afficher_div('Test1.4'); return

false;">Test1.4</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test1.5'); return

false;">Test1.5</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test1.6'); return

false;">Test1.6</a><br/></li></ul>
</div>

<b><a href="" onclick="javascript:afficher_div('Texte2'); return

false;">Texte2</a></b><br/>
<div id="page1.2" style="display:none;">
<ul><li><a href="" onclick="javascript:afficher_div('Test2.1'); return

false;">Test2.1</a></li><br/>
<div id="page1.2.1" style="display:none;" />
<li><a href="" onclick="javascript:afficher_div('Test2.2'); return

false;">Test2.2</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test2.3'); return

false;">Test2.3</a></li></ul></div>

<b><a href="" onclick="javascript:afficher_div('Texte3'); return

false;">Texte3</a></b><br/>
<div id="page1.3" style="display:none;">
<ul><li><a href="" onclick="javascript:afficher_div('Test3.1'); return

false;">Test3.1</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test3.2'); return

false;">Test3.2</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test3.3'); return

false;">Test3.3</a></li></ul></div>

</div>
</div>

<div id="page2" style="display:none;">
<div align="center">
<page2.1" style="display:none;">
<p class="principe">Test 2.1</p>
<p class="principe">Test 2.2</p>

</div>
</div>

<div id="page3" style="display:none;">
<div align="center">
<page3.1" style="display:none;">
<p class="principe">Test 3.1</p>
<p class="principe">Test 3.2</p>

</div>
</div>

</body>

</html>

Comment puis-je raccourcir le script ?
Mercii d'avance.
0
Réponse 3 / 7
midnnight Messages postés 514 Statut Membre 38

Ca marche mal sous opera ton truc...
0
Réponse 4 / 7
coastlyne

Je travaille sous IE dsl
je cherche juste à modifier le javascript pour pas qu'il fasse 10 pages au final à chaque fois que j'aurais des liens à rajouter.

Merci
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  Salut
  
  Juste pour dire, quand on crée un site web, il faut s'arranger pour qu'il passe bien sur tout les principaux navigateur, et pas seulement sur celui qu'on utilise. :-)
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 7
coastlyne

Savez-vous comment réduire le script ?

Merci
0
Réponse 6 / 7
coastlyne

Est-ce que quelqu'un saurait réduire tout mon code, je trouve très répétitif mais je suis débutante dsl ...

Merci
0

Pitet

Salut,

Voici un exemple de réduction de ton code :

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		/* Par défaut les div ne sont pas affichés. */
		.groupePages1, .groupePages2 { display: none; border: solid 1px red; }
	</style>
</head>
<body>

	<input type="button" value="Référence" onclick="afficherDiv('page1')" />
	<input type="button" value="Thème" onclick="afficherDiv('page2')" />
	<input type="button" value="Principe" onclick="afficherDiv('page3')" />
	
	<div id="page1" class="groupePages1">
		Page 1<br />
		<a href="javascript:afficherDiv('page1.1');">Test1.1</a><br />
		<div id="page1.1" class="groupePages2">
			Page 1.1
		</div>
		<a href="javascript:afficherDiv('page1.2');">Test1.2</a><br />
		<div id="page1.2" class="groupePages2">
			Page 1.2
		</div>
		<a href="javascript:afficherDiv('page1.3');">Test1.3</a><br />
		<div id="page1.3" class="groupePages2">
			Page 1.3
		</div>
	</div>
	
	<div id="page2" class="groupePages1">
		Page 2<br />
		<a href="javascript:afficherDiv('page2.1');">Test2.1</a><br />
		<div id="page2.1" class="groupePages2">
			Page 2.1
		</div>
		<a href="javascript:afficherDiv('page2.2');">Test2.2</a><br />
		<div id="page2.2" class="groupePages2">
			Page 2.2
		</div>
		<a href="javascript:afficherDiv('page2.3');">Test2.3</a><br />
		<div id="page2.3" class="groupePages2">
			Page 2.3
		</div>
	</div>
	
	<div id="page3" class="groupePages1">
		Page 3<br />
		<a href="javascript:afficherDiv('page3.1');">Test3.1</a><br />
		<div id="page3.1" class="groupePages2">
			Page 3.1
		</div>
		<a href="javascript:afficherDiv('page3.2');">Test3.2</a><br />
		<div id="page3.2" class="groupePages2">
			Page 3.2
		</div>
		<a href="javascript:afficherDiv('page3.3');">Test3.3</a><br />
		<div id="page3.3" class="groupePages2">
			Page 3.3
		</div>
	</div>

	<script type="text/javascript">
	
		function afficherDiv(idDiv) {
			// on récupère le div à afficher par son id
			var div = document.getElementById(idDiv);
			// on récupère les div du même niveau que le div à afficher
			var groupePages = document.getElementsByClassName(div.className);
			// on cache tous les div
			for (var i = 0; i < groupePages.length; i++) {
				groupePages[i].style.display = 'none';
			}
			// et on affiche le div à afficher
			div.style.display = 'block';
		}
	
	</script>
	
</body>
</html>

Pour expliquer brièvement le principe, lorsque je souhaite afficher un div, je commence par les cacher tous puis j'affiche celui demandé.

Puisque tu souhaites cacher/afficher des div imbriqués, j'ai défini des groupes de div avec l'attribut class : par exemple si je souhaite afficher le div page1.2, je ne dois pas cacher le div page1 mais uniquement les div page1.1 et page1.3 (qui appartiennent tous les deux à la classe groupePages2).

Cette solution n'est pas la plus simple à comprendre mais elle est relativement courte et elle te permet d'ajouter des éléments en html sans avoir à modifier ton code javascript.

Bon courage.

coastlyne

Mercii beaucoup de ton aide !!

J'ai copié ton code mais je ne vois que les boutons et lorsque je clique sur les boutons, rien ne s'affiche :(

Aurais-je oublié quelque chose ?
Merci
0
Pitet

Normalement ce code fonctionne sans rien d'autre.

As tu une erreur dans la console javascript ?
0

Cacher un contenu

7 réponses

Discussions similaires

Newsletters