Événement click

Montrer un élément html

Le texte du théorème 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 du 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>
	div{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
	}
	#texte{display:none;}
</style>
</head>




<body>

<div>
<h2 id="titre">Le théorème de Pythagore</h2>

<p id="texte"> 
	Pour tout triangle ABC, si ABC est rectangle en A alors AB<sup>2</sup>+AC<sup>2</sup>=BC<sup>2</sup>.
</p>
</div>


 

</body>    
    
    
    
    
</html>

Une aide .

Vous pouvez lire cette page.

Une solution

Un code possible :

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

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




<body>

<div>
<h2 id="titre">Le théorème de Pythagore</h2>

<p id="texte"> 
	Pour tout triangle ABC, si ABC est rectangle en A alors AB<sup>2</sup>+AC<sup>2</sup>=BC<sup>2</sup>.
</p>
</div>


<script>
let texte = document.getElementById("texte");
let titre = document.getElementById("titre"); 
 
titre.addEventListener(	
	'click',  
	function(){ 
		texte.style.display = "block";
	}
);
</script>

</body>    
    
    
    
    
</html>

Montrer, cacher un élément html

Dans le code ci-dessous :

Un clic sur le titre du 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>
	section{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
	}
	article{ 
		border: 2px dotted black;
		margin: 1em;
		text-align: center;
	}
	#texte{display:none;}
	#demonstration{display:none;}
</style>
</head>




<body>

<section>
	<h2 id="titre">Une identité remarquable</h2>

	<article id="texte"> 
		Pour tous réels a et b, on a a<sup>2</sup> - b<sup>2</sup> = (a-b)(a+b).
	</article>

	<div id="demonstration">
		Il suffit de développer le membre de droite!
	</div>
</section>
 

</body>    
    
    
    
    
</html>

Une solution

Un code possible (à coper coller dans une page html vierge pour tester) ou à tester :

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

<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
	section{
		border: 1px solid red; 
		margin:1em; 
		padding:1em;
	}
	article{ 
		border: 2px dotted black;
		margin: 1em;
		text-align: center;
	}
	#texte{display:none;}
	#demonstration{display:none;}
</style>
</head>




<body>

<section>
	<h2 id="titre">Une identité remarquable</h2>

	<article id="texte"> 
		Pour tous réels a et b, on a a<sup>2</sup> - b<sup>2</sup> = (a-b)(a+b).
	</article>

	<div id="demonstration">
		Il suffit de développer le membre de droite!
	</div>
</section>


<script>
let texte = document.getElementById("texte");
let titre = document.getElementById("titre"); 
let demo = document.getElementById("demonstration"); 
 
titre.addEventListener(
	'click',  
	function(){ 
		if(texte.style.display == "block")
		{
			texte.style.display = "none";
			demo.style.display = "none";
		}
		else
		{
			texte.style.display = "block";
		}
	}
);




texte.addEventListener(
	'click',  
	function(){ 
		if(demo.style.display == "block")
		{
			demo.style.display = "none";
		}
		else
		{
			demo.style.display = "block";
		}
	}
);

</script>

</body>    
    
    
    
    
</html>