Rendre visible/invisible une balise
Bonjour. :)
J'ai un petit problème, je dois parvenir à rendre visible/invisible certains paragraphes de ma page grâce à du JavaScript.
Ma page contient des devinettes et un unique bouton qui permet d'afficher ou de cacher les réponses (le bouton change de valeur lorsqu'on clique dessus). Le problème est que je n'arrive justement pas à cacher/afficher les réponses ^^
Voici mon code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="application/javascript" src="ex2js"> </script>
<title>Révisions - ex 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<link rel="stylesheet" media="screen" type="text/css" title="ex2css" href="ex2css.css" />
</head>
<body>
<h1 style="text-align:center">Exercice 2</h1>
<p> Comment appelle-t-on un homme qui a les deux yeux dans le même trou ? </p>
<p class="solution"> Un gynécologue. </p>
<p> Qu'est ce qui est bleu et qui fait "poutpout" ? </p>
<p class="solution"> Un poutpout bleu. </p>
<p> Quelle est la différence entre une cacahuète et un clitoris ? </p>
<p class="solution"> Aucune. Ce sont tous les deux des amuse-gueules. </p> <br /> <br />
<input type="button" value="Afficher" id="bouton" onclick="solutions()"/>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
function init()
{
}
window.onload = init;
var elts = document.getElementsByClass("solution");
var visible = false;
function solutions()
{
if(visible)
{
visible = false;
document.getElementById("bouton").value = "Afficher";
for(var i = 0; i < elts.length; i++)
elts[i].style.display = "none";
}
else
{
visible = true;
document.getElementById("bouton").value = "Cacher";
for(var i = 0; i < elts.length; i++)
elts[i].style.display = "block";
}
}
function getElementsByClass(maClass)
{
var tabRetour = new Array();
var tabTmp = new Array();
tabTmp = document.getElementsByTagName("*");
j=0;
for (i=0; i<tabTmp.length; i++)
{
if (tabTmp[i].className==maClass)
{
tabRetour[j]=tabTmp[i];
j++;
}
}
return tabRetour;
} |
Code:
1
2
3
4
| .solution
{
display : none;
} |
Merci d'avance.
