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

A voir également:

Cacher un contenu
Cacher son numéro - Guide
Cacher conversation whatsapp - Guide
Word a trouvé du contenu illisible - Guide
Cacher ses amis sur facebook - Guide
Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide

7 réponses

Réponse 1 / 7

gardiendelanuit Messages postés 1770 Date d'inscription Statut Membre Dernière intervention 264

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 1770 Date d'inscription Statut Membre Dernière intervention 264

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.

Réponse 3 / 7

midnnight Messages postés 484 Date d'inscription Statut Membre Dernière intervention 38

Ca marche mal sous opera ton truc...

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

Pierrecastor Messages postés 41491 Date d'inscription Statut Modérateur Dernière intervention 4 151

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. :-)

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

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

Réponse 7 / 7

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

Pitet

Normalement ce code fonctionne sans rien d'autre.

As tu une erreur dans la console javascript ?

Discussions similaires

Contenue masqué

ca veut dire quoi wmg sur youtube ?

Facebook - "Désolé, ce contenu n’est pas disponible..." et autre probl

Votre réponse

Discussions similaires