Afficher / Masquer un bloc

Version imprimable

Bonsoir, je viens d'éplucher tous les topics à propos de ce problème, impossible de trouver d'ou vient mon problème 8O

Je vous met les codes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function sommaire()
{
	var cadre = document.getElementById(sommaire);
	var croix = document.getElementById(sommaireCroix);
 
	if(cadre.style.display == 'none' || cadre.style.display == '')
	{
		cadre.style.display = 'block';
		croix.innerHTML = '_';		
	}
	else
	{
		croix.innerHTML = 'X';
		cadre.style.display  = ''; 
	}
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#pageRubriqueBiere #sommaire
{
	width: 400px;
	margin: auto;
	margin-bottom: 40px;
	padding: 5px;
	background-color: #EEE;
	border: 1px #000 solid;
}
 
#pageRubriqueBiere #sommaire #sommaireCroix
{
	width: 20px;
	display: block;
	float: right;
	text-align: center;
}

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
<div id="sommaire">
<a href="#" onclick="sommaire()" id="sommaireCroix">X</a>
<ul>
<li><a href="#histoire">Histoire</a></li>
<li><a href="#fabrication1">Fabrication</a>
	<ul>
	<li><a href="#composition">Composition de la bière</a>
		<ul>
		<li><a href="#eau">L'eau</a></li>
		<li><a href="#houblon">Le houblon</a></li>
		</ul>
	</li>
	<li><a href="#fabrication2">Fabrication en cinq grandes étapes</a>
		<ul>
		<li><a href="#maltage">Le maltage</a></li>
		<li><a href="#saccharification">La saccharification</a></li>
		<li><a href="#aromatisation">L'aromatisation ou houblonnage</a></li>
		<li><a href="#fermentation">La fermentation</a></li>
		<li><a href="#conditionnement">Le conditionnement</a></li>
		</ul>
	</ul>
<li><a href="#caracteristiques">Caractéristiques</a>
	<ul>
 
	</ul>
</li>
</li>
</ul>
</div>

Quand je clic sur la croix. Rien ne se passe. Vous pouvez vérifier ici

Merci d'avance =)

avec les guillemets que tu as oublié :

Code:

1
2
3
 
	var cadre = document.getElementById("sommaire");
	var croix = document.getElementById("sommaireCroix");

Code:

1
2
3
 
else ...
cadre.style.display  = 'none';

Merci =)
Ça marche mieux mais pas encore exactement.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function sommaire()
{
	var sommaire = document.getElementById("sommaire");
	var sommaireCroix = document.getElementById("sommaireCroix");
 
	if(sommaireCroix.innerHTML == 'X')
	{
		sommaireCroix.innerHTML = '_';
		sommaire.style.height = 'auto';	
	}
	else
	{
		sommaireCroix.innerHTML = 'X';
		sommaire.style.height  = '15px'; 
		sommaire.style.overflow  = 'hidden'; 
	}
}
</script>

Il faut deux clics pour que le bloc se réduise. Le premier clic ne fait que changer le X en _. Bizarre.

11/02/2010, 14h57
SpaceFrog

avec un nom d'obet = nom de fonction comment veux tu qu'il retrouve ses petits ?

sommaire et sommaire() !!! :nono:

Toujours pas :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function sommaire()
{
	var varSommaire = document.getElementById("sommaire");
	var varSommaireCroix = document.getElementById("sommaireCroix");
 
	if(varSommaireCroix.innerHTML == 'X')
	{
		varSommaireCroix.innerHTML = '_';
		varSommaire.style.height = 'auto';	
	}
	else
	{
		varSommaireCroix.innerHTML = 'X';
		varSommaire.style.height  = '15px'; 
		varSommaire.style.overflow  = 'hidden'; 
	}
}
</script>

Dans le bon sens ça marche mieux

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<style type="text/css">
#pageRubriqueBiere #sommaire
{
	width: 400px;
	margin: auto;
	margin-bottom: 40px;
	padding: 5px;
	background-color: #EEE;
	border: 1px #000 solid;
}
 
#pageRubriqueBiere #sommaire #sommaireCroix
{
	width: 20px;
	display: block;
	float: right;
	text-align: center;
}
</style>
 
<script type="text/javascript">
function sommaire()
{
	var varSommaire = document.getElementById("sommaire");
	var varSommaireCroix = document.getElementById("sommaireCroix");
 
	if(varSommaireCroix.innerHTML == 'X')
	{
		varSommaireCroix.innerHTML = '_';
		varSommaire.style.height = '20px';	
		varSommaire.style.overflow  = 'hidden'; 
	}
	else
	{
		varSommaireCroix.innerHTML = 'X';
		varSommaire.style.height  = 'auto'; 
 
	}
}
</script>
</head>
 
<body>
<div id="sommaire">
<a href="#" onclick="sommaire();return false;" id="sommaireCroix">X</a>
<ul>
<li><a href="#histoire">Histoire</a></li>
<li><a href="#fabrication1">Fabrication</a>
	<ul>
	<li><a href="#composition">Composition de la bière</a>
		<ul>
		<li><a href="#eau">L'eau</a></li>
		<li><a href="#houblon">Le houblon</a></li>
		</ul>
	</li>
	<li><a href="#fabrication2">Fabrication en cinq grandes étapes</a>
		<ul>
		<li><a href="#maltage">Le maltage</a></li>
		<li><a href="#saccharification">La saccharification</a></li>
		<li><a href="#aromatisation">L'aromatisation ou houblonnage</a></li>
		<li><a href="#fermentation">La fermentation</a></li>
		<li><a href="#conditionnement">Le conditionnement</a></li>
		</ul>
	</ul>
<li><a href="#caracteristiques">Caractéristiques</a>
	<ul>
 
	</ul>
</li>
</ul>
</div>
</body>

Je ne vois pas le rapport. Je fais mes déclarations comme ceci.

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
<head>
<title>All Beers - <?php titrePage(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Elwyn" />
<meta name="description" content="Bienvenue sur All Beers ! Le site qui regroupe les amateurs de bières." />
<meta name="keywords" content="bière, bières" />
<meta name="google-site-verification" content="r7Cn4hcaNDjaDr9Z6bPwA3XmZxQTAxWoLW-G3uZu_v8" />
<link type="text/css" href="styles/main.css" rel="stylesheet" />
<link type="text/css" href="styles/menu.css" rel="stylesheet" />
<link type="text/css" href="styles/table.css" rel="stylesheet" />
<link type="text/css" href="styles/bloc.css" rel="stylesheet" />
<link type="text/css" href="styles/style.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="design/favicon.ico" />
<link rel="alternate" type="application/rss+xml" href="http://allbeers.free.fr/rss/rss.xml" title="All Beers" />
<script type="text/javascript">
function sommaire()
{
	var varSommaire = document.getElementById("sommaire");
	var varSommaireCroix = document.getElementById("sommaireCroix");
 
	if(varSommaireCroix.innerHTML == 'X')
	{
		varSommaireCroix.innerHTML = '_';
		varSommaire.style.height = 'auto';	
	}
	else
	{
		varSommaireCroix.innerHTML = 'X';
		varSommaire.style.height  = '15px'; 
		varSommaire.style.overflow  = 'hidden'; 
	}
}
</script>
</head>

11/02/2010, 15h24
SpaceFrog

heu quand tu cliques sur X c'est supposé fermer ?
ou l'inverse ?
11/02/2010, 15h28
fallais

Bon en tapant la réponse à ta question je viens de comprendre ce que tu m'as dis plus haut ^^

Le problème est résolu, merci :)