Événement click

Montrer des éléments html

Le texte des théorèmes dans le code ci-dessous est caché au départ. Votre mission est d'ajouter le code d'un script qui permette de déclencher l'affichage du texte d'un théorème lors d'un clic sur le nom du théorème.

Le code à modifier.

<!DOCTYPE html>
<html lang="fr">
    
    

<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
	.theoreme{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
	}
	.texte{display:none;}
</style>
</head>




<body>

	<article class="theoreme">
		<h2 class="titre">Théorème 1</h2>

		<p class="texte"> 
			Texte du théorème 1
		</p>
	</article>

	<article class="theoreme">
		<h2 class="titre">Théorème 2</h2>

		<p class="texte"> 
			Texte du théorème 2
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 3</h2>

		<p class="texte"> 
			Texte du théorème 3
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 4</h2>

		<p class="texte"> 
			Texte du théorème 4
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 5</h2>

		<p class="texte"> 
			Texte du théorème 5
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 6</h2>

		<p class="texte"> 
			Texte du théorème 6
		</p>
	</article>
 
</body>    
</html>

Une solution

Un code possible :

<!DOCTYPE html>
<html lang="fr">
    
    

<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
	.theoreme{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
	}
	.texte{display:none;}
</style>
</head>




<body>

	<article class="theoreme">
		<h2 class="titre">Théorème 1</h2>

		<p class="texte"> 
			Texte du théorème 1
		</p>
	</article>

	<article class="theoreme">
		<h2 class="titre">Théorème 2</h2>

		<p class="texte"> 
			Texte du théorème 2
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 3</h2>

		<p class="texte"> 
			Texte du théorème 3
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 4</h2>

		<p class="texte"> 
			Texte du théorème 4
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 5</h2>

		<p class="texte"> 
			Texte du théorème 5
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 6</h2>

		<p class="texte"> 
			Texte du théorème 6
		</p>
	</article>


	<script>
	let theoremes = document.querySelectorAll(".theoreme"); 
	let titres = document.querySelectorAll(".titre");
	let textes = document.querySelectorAll(".texte");
	 
	
	for(let i=0; i<theoremes.length; i++)
	{
		titres[i].addEventListener(
			'click',  
			function(){ 
				 
				textes[i].style.display = "block";
			}
		);
	}
	</script>

</body>    
    
    
    
    
</html>

Une autre solution

On utilise querySelector pour sélectionner l'élément de classe titre dans chacun des théorèmes. Pour sélectionner dans chacun des théorèmes, on n'utilise pas document.querySelector mais theoremes[i].querySelector.

<!DOCTYPE html>
<html lang="fr">
    
    

<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
	.theoreme{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
	}
	.texte{display:none;}
</style>
</head>




<body>

	<article class="theoreme">
		<h2 class="titre">Théorème 1</h2>

		<p class="texte"> 
			Texte du théorème 1
		</p>
	</article>

	<article class="theoreme">
		<h2 class="titre">Théorème 2</h2>

		<p class="texte"> 
			Texte du théorème 2
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 3</h2>

		<p class="texte"> 
			Texte du théorème 3
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 4</h2>

		<p class="texte"> 
			Texte du théorème 4
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 5</h2>

		<p class="texte"> 
			Texte du théorème 5
		</p>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 6</h2>

		<p class="texte"> 
			Texte du théorème 6
		</p>
	</article>


	<script>
	let theoremes = document.querySelectorAll(".theoreme"); 
	
	for(let i=0; i<theoremes.length; i++)
	{
		let titre = theoremes[i].querySelector(".titre");
		titre.addEventListener(
			'click',  
			function(){ 
				let texte = theoremes[i].querySelector(".texte");
				texte.style.display = "block";
			}
		);
	}
	</script>

</body>    
    
    
    
    
</html>

Montrer, cacher un élément html

Dans le code ci-dessous :

Un clic sur le titre d'un théorème montre le texte du théorème (mais pas la démonstration) si ce texte est caché et cache le texte du théorème (et la démonstration) si le texte est visible.
Si le texte est visible, un clic sur le texte cache ou montre la démonstration suivant qu'elle est visible ou non.

Le code à modifier.

Copiez et collez ce texte dans un fichier html vierge pour vos tests.

<!DOCTYPE html>
<html lang="fr">
    
    

<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
	.theoreme{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
		width:50%;
		margin: 1rem auto;
	}
	h2.titre{
		text-align:center;
	}
	.texte{
		display:none;
	}
	.demonstration{
		display:none;
		margin:1rem;
		border: 1px dotted green;
	}
</style>
</head>




<body>

	<article class="theoreme">
		<h2 class="titre">Théorème 1</h2>

		<p class="texte"> 
			Texte du théorème 1
		</p>
		
		<div class="demonstration">
			Démonstration du théorème 1.
		</div>
	</article>

	<article class="theoreme">
		<h2 class="titre">Théorème 2</h2>

		<p class="texte"> 
			Texte du théorème 2
		</p>
		
		<div class="demonstration">
			Démonstration du théorème 2.
		</div>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 3</h2>

		<p class="texte"> 
			Texte du théorème 3
		</p>
		
		<div class="demonstration">
			Démonstration du théorème 3.
		</div>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 4</h2>

		<p class="texte"> 
			Texte du théorème 4
		</p>
		
		<div class="demonstration">
			Démonstration du théorème 4.
		</div>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 5</h2>

		<p class="texte"> 
			Texte du théorème 5
		</p>
		
		<div class="demonstration">
			Démonstration du théorème 5.
		</div>
	</article>


	<article class="theoreme">
		<h2 class="titre">Théorème 6</h2>

		<p class="texte"> 
			Texte du théorème 6
		</p>
		
		<div class="demonstration">
			Démonstration du théorème 6.
		</div>
	</article>

 
</body>    
    
    
    
    
    
</html>

Une solution

Page solution (rappel: clic droit, code source de la page pour voir le code).

Autre page solution

getComputedStyle

Dans la page proposée comme solution, vous aurez sans doute remarqué la nécessité de deux clicks sur un titre pour afficher le texte correspondant. Pourquoi?

La raison est que textes[i].style.display est en fait au départ non affecté. Au premier click, le test dans if(textes[i].style.display == "none") est donc à false et c'est donc la partie else qui s'exécute (textes[i].style.display = "none";), au second click la valeur de textes[i].style.display est donc bien "none".

Pour en savoir plus vous pouvez par exemple lire cette page du cours OpenClassRoom. Vous y découvrirez qu'une solution possible pour résoudre ce problème est d'utiliser getComputedStyle(). Voir par exemple le code de cette page qui règle le problème avec getComputedStyle().