Afficher des div en javascript/html

Version imprimable

Bonjour a tous !
Voila j'essaye de créer un bout de page html/css/javascript permettant d'afficher différentes div par le biais de boutons.
Mon soucis est que j'ai vraiment du mal avec javascript et du coup malgré avoir trouvé des bouts de codes et essayé de les comprendre, je me retrouve un peu dans l'impasse :(
En effet ca marche dans un premier temps lorsque que je clique sur les 5 boutons puis plus après..
J'aurai voulu donc savoir si quelqu'un aurait pu m'aider ou partager ses lumières :oops:

Voila le code :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
#bouton_texte1{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;
	border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
}
#bouton_texte2{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;
	border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
}
#bouton_texte3{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;
	border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
}
#bouton_texte4{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;
	border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
}
#bouton_texte5{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;
	border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
}
.texte1{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;
	position:absolute;
}
.texte1:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;
}
.texte2{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;
	position:absolute;
}
.texte2:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;
}
.texte3{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;
	position:absolute;
}
.texte3:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;
}
.texte4{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;
	position:absolute;
}
.texte4:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;
}
.texte5{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;
	position:absolute;
}
.texte5:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;
}
#wrapper{
	position:relative;
}

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
function afficher_cacher1(id){
	if(document.getElementById(id).style.visibility=="hidden"){
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 1';
	}
	else{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 1';
	}
	return true;
}
function afficher_cacher2(id){
	if(document.getElementById(id).style.visibility=="hidden"){
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 2';
	}
	else{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 2';
	}
	return true;
}
function afficher_cacher3(id){
	if(document.getElementById(id).style.visibility=="hidden"){
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 3';
	}
	else{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 3';
	}
	return true;
}
function afficher_cacher4(id){
	if(document.getElementById(id).style.visibility=="hidden"){
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 4';
	}
	else{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 4';
	}
	return true;
}
function afficher_cacher5(id){
	if(document.getElementById(id).style.visibility=="hidden"){
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 5';
	}
	else{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='Pré conférence 5';
	}
	return true;
}

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
<div id="header">
<span class="bouton" id="bouton_texte1" onclick="javascript:afficher_cacher1('texte1');">Pré conférence 1</span>
<span class="bouton" id="bouton_texte2" onclick="javascript:afficher_cacher2('texte2');">Pré conférence 2</span>
<span class="bouton" id="bouton_texte3" onclick="javascript:afficher_cacher3('texte3');">Pré conférence 3</span>
<span class="bouton" id="bouton_texte4" onclick="javascript:afficher_cacher4('texte4');">Pré conférence 4</span>
<span class="bouton" id="bouton_texte5" onclick="javascript:afficher_cacher5('texte5');">Pré conférence 5</span>
</div>
<div id="wrapper">
	<div id="texte1" class="texte1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte2" class="texte2">
	Lorep ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte3" class="texte3">
	Lorei ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte4" class="texte4">
	Loret ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte5" class="texte5">
	Lorer ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
</div>
<script type="text/javascript">
//<!--
afficher_cacher1('texte1');
afficher_cacher2('texte2');
afficher_cacher3('texte3');
afficher_cacher4('texte4');
afficher_cacher5('texte5');
//-->
</script>

En espérant qu'il ne soit pas trop indigeste en cette période de post fêtes de fin d'années.
Merci d'avance et bien à vous ;)

06/01/2015, 17h15
SpaceFrog

plus simplement avec jquery
http://jsfiddle.net/ewxx3un5/1
06/01/2015, 17h22
Theta

Et au passage plutôt que de copier coller le css pour l'id chaque bouton, créé une classe.
06/01/2015, 17h25
taitai83

Merci SpaceFrog !
Du coup je remplace simplement dans mon code, en mettant le bout de code en Jquery entre les balises script ?
06/01/2015, 17h37
SpaceFrog

si tu as linké jquery oui ...

j'ai viré les onclick car je les attribues sur le ready ...

http://javascript.developpez.com/faq...#InclurejQuery
06/01/2015, 17h45
Bovino

Citation:

Envoyé par Theta

Et au passage plutôt que de copier coller le css pour l'id chaque bouton, créé une classe.

Entièrement d'accord. Et ce qui est vrai pour le CSS l'est tout autant pour les fonctions JavaScript...
06/01/2015, 18h06
lysandro

:D Pour ton ego : ton code javascript fonctionne trés bien. Une fois que tu as appuyé sur tes cinq boutons, tes cinq textes sont affichés. Les cinq. Il te faut donc réappuyer sur tes cinq boutons pour tous les masquer.

Merci à tous !
J'ai donc fait une classe pour les boutons, fait l'appel à la biblio Jquery et insérer le code jQuery entre les balises script mais cela ne fonctionne pas :(

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PréConférences</title>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<style>
	.bouton
		{
		color:#0000ff;
		font-size:24px;
		cursor:pointer;
		border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
		}
 
	.texte1
		{
		border:1px solid #333333;
		background:#eeeeee;
		padding:10px;
		color:#333333;
		position:absolute;
		}
	.texte1:hover
		{
		border:1px solid #000000;
		background:#cccccc;
		color:#000000;
		}
	.texte2
		{
		border:1px solid #333333;
		background:#eeeeee;
		padding:10px;
		color:#333333;
		position:absolute;
		}
	.texte2:hover
		{
		border:1px solid #000000;
		background:#cccccc;
		color:#000000;
		}
		.texte3
		{
		border:1px solid #333333;
		background:#eeeeee;
		padding:10px;
		color:#333333;
		position:absolute;
		}
	.texte3:hover
		{
		border:1px solid #000000;
		background:#cccccc;
		color:#000000;
		}
		.texte4
		{
		border:1px solid #333333;
		background:#eeeeee;
		padding:10px;
		color:#333333;
		position:absolute;
		}
	.texte4:hover
		{
		border:1px solid #000000;
		background:#cccccc;
		color:#000000;
		}
		.texte5
		{
		border:1px solid #333333;
		background:#eeeeee;
		padding:10px;
		color:#333333;
		position:absolute;
		}
	.texte5:hover
		{
		border:1px solid #000000;
		background:#cccccc;
		color:#000000;
		}
	#wrapper{
		position:relative;
		}
</style>
 
</head>
<body>
 
	<div id="header">
<span class="bouton" id="bouton_texte1" >Pré conférence 1</span>
<span class="bouton" id="bouton_texte2" >Pré conférence 2</span>
<span class="bouton" id="bouton_texte3" >Pré conférence 3</span>
<span class="bouton" id="bouton_texte4" >Pré conférence 4</span>
<span class="bouton" id="bouton_texte5" >Pré conférence 5</span>
	</div>
 
	<div id="wrapper">
	<div id="texte1" class="texte1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte2" class="texte2">
	Lorep ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte3" class="texte3">
	Lorei ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte4" class="texte4">
	Loret ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte5" class="texte5">
	Lorer ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	</div>
 
<script type="text/javascript">
	$(function () {
    $('[id^="texte"]').hide();
    $('#texte1').show();
    $('.bouton').on('click', function () {
        id = $(this).attr('id').match(/\d/);
 
        $('[id^="texte"]').hide();
        $('#texte' + id).show();
 
    });
});
</script>
</body>
</html>

Merci encore pour votre aide précieuse et bonne journée ;)

07/01/2015, 15h28
Bovino

Attention. Si on te conseille d'utiliser des classes plutôt que des id, c'est parce que contrairement aux id, plusieurs éléments peuvent avoir la même classe. Cela permet donc de n'avoir qu'une seule règle CSS qui s'appliquera à tous les éléments de la page ayant cette classe. Si tu mets une classe distincte pour chaque élément, ce n'est plus vraiment utile ! :aie:

Merci pour ta réponse ;)
Tu parlais des classes "texte" ?
Je les ai changé mais le problème persiste :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.bouton{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;
	border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
}
.texte{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;
	position:absolute;
}
.texte:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;
}
#wrapper{
	position:relative;
}

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
<div id="header">
<span class="bouton" id="bouton_texte1" >Pré conférence 1</span>
<span class="bouton" id="bouton_texte2" >Pré conférence 2</span>
<span class="bouton" id="bouton_texte3" >Pré conférence 3</span>
<span class="bouton" id="bouton_texte4" >Pré conférence 4</span>
<span class="bouton" id="bouton_texte5" >Pré conférence 5</span>
</div>
<div id="wrapper">
	<div id="texte1" class="texte">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte2" class="texte">
	Lorep ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte3" class="texte">
	Lorei ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte4" class="texte">
	Loret ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte5" class="texte">
	Lorer ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
$(function () {
    $('[id^="texte"]').hide();
    $('#texte1').show();
    $('.bouton').on('click', function () {
        id = $(this).attr('id').match(/\d/);
 
        $('[id^="texte"]').hide();
        $('#texte' + id).show();
 
    });
});

Peut être un problème due a la biblio ou l'appel de la biblio jQuery ?

Alors déjà

Code:

$('[id^="texte"]').hide();

c'est correct, mais pas optimisé,

Code:

$('.texte.').hide();

est préférable. ;)

Sinon, ton problème est que

Code:

id = $(this).attr('id').match(/\d/);

renvoie un booléen, donc id vaut true car chaque id contient au moins un chiffre.
Ce que je te conseillerais, ce serait d'utiliser les attributs data-* qui sont très pratiques pour ce genre de situation.
Code:

1 2 3 4 5 6 7 <div id="header"> Pré conférence 1 Pré conférence 2 Pré conférence 3 Pré conférence 4 Pré conférence 5 </div>
Code:

1 2 3 4 5 6 7 8 9 $(function () { $('.texte').hide(); $('#texte1').show(); $('.bouton').on('click', function () { var id = $(this).data('lien'); $('.texte').hide(); $('#' + id).show(); }); });

07/01/2015, 16h08
SpaceFrog

renvoie un booléen, donc id vaut true car chaque id contient au moins un chiffre.

tu es sur Beef ? pour moi ça renvoie un array ???
il faut donc recupérer id[0]...

http://jsfiddle.net/ewxx3un5/2/
07/01/2015, 16h14
Bovino

Au temps pour moi, je confondais avec test()... :oops:

Vraiment merci pour votre aide à tous les deux, je vois bien que ça marche correctement sur JSFiddle , en revanche chez moi non :(
J'ai pourtant mis exactement le même script...l'appel de ma biblio jQuery a l'air bon aussi pourtant...

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PréConférences</title>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<style>
	.bouton
		{
		color:#0000ff;
		font-size:24px;
		cursor:pointer;
		border-radius: 5px;
    	border: 1px solid;
    	margin: 17px;
		}
 
	.texte
		{
		border:1px solid #333333;
		background:#eeeeee;
		padding:10px;
		color:#333333;
		position:absolute;
		}
	.texte:hover
		{
		border:1px solid #000000;
		background:#cccccc;
		color:#000000;
		}
	#wrapper{
		position:relative;
		}
</style>
 
</head>
<body>
 
	<div id="header">
<span class="bouton" id="bouton_texte1" >Pré conférence 1</span>
<span class="bouton" id="bouton_texte2" >Pré conférence 2</span>
<span class="bouton" id="bouton_texte3" >Pré conférence 3</span>
<span class="bouton" id="bouton_texte4" >Pré conférence 4</span>
<span class="bouton" id="bouton_texte5" >Pré conférence 5</span>
	</div>
 
	<div id="wrapper">
	<div id="texte1" class="texte">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte2" class="texte">
	Lorep ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte3" class="texte">
	Lorei ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte4" class="texte">
	Loret ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	<div id="texte5" class="texte">
	Lorer ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
	Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
	Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
	</div>
	</div>
 
<script type="text/javascript">
	$(function () {
    $('[id^="texte"]').hide();
    $('#texte1').show();
    $('.bouton').on('click', function () {
        id = $(this).attr('id').match(/\d/)[0];
        console.log(id);
        $('[id^="texte"]').hide();
        $('#texte' + id).show();
 
    });
});
</script>
</body>
</html>

07/01/2015, 17h02
SpaceFrog

il ne faut pas faire d'archéologie avec jquery ....
Tu as juste pris une version trop ancienne qui ne supporte pas on() ...

vire aussi la ligne du console log (placée juste pour le debug) qui peut poser des soucis selon le navigateur
07/01/2015, 17h04
Bovino

En fait, c'est normal : tu utilises une version obsolète de jQuery dans laquelle la fonction .on() n'existait pas encore.
Utilise une version récente et ça ira beaucoup mieux !
07/01/2015, 17h08
taitai83

Yes ! C'est tout bon ;)
Merci encore et tout de bon pour 2015 :P