Discussion :

[deGoer]

Bien le bonjour,

Tous d’abord veuillez m’excusai si mon message n'est pas à sa bonne place.


Voilà je viens vers vous car je rencontre un soucis.

J'ai créer une liste avec plusieurs liens du genre Spoiler

Quand je clique sur mon lien le contenue s'affiche impeccable
Quand je clique sur Fermer le contenue se ferme s'en problème

Vous allez me dire OK mais ou est le problème

Le problème :

Quand j'arrive sur la liste y a aucun saut de ligne entre les liens
Quand je clique sur un lien et que je le referme je me retrouve sur ma liste, mais entre les liens j'ai au moins 2 saut de ligne.

Je vous montre sa en images


On arrive sur la liste


On va cliquer par exemple sur 01 - Installer Windows 10

On clique ensuite sur Fermer en rouge pour fermer l'article



Nous revoilà sur la liste mais avec 2 saut de lignes entre les liens


Ma question est comment faire pour que quand je clique sur Fermer ma liste sois identique comme sur la première image


Voici mon code

Script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript">
<!--
function masquemod(id){
   if(document.getElementById(id).style.display=='none'){
      // ouverture div
      document.getElementById(id).style.display='block';
      document.getElementById('toogle1').style.display='none';
      document.getElementById('toogle2').style.display='none';
      document.getElementById('toogle3').style.display='none';
      document.getElementById('toogle4').style.display='none';
      document.getElementById('toogle5').style.display='none';
      document.getElementById('toogle6').style.display='none';
   }else{
      // fermeture div
      document.getElementById(id).style.display='none';
      document.getElementById('toogle1').style.display='block';
      document.getElementById('toogle2').style.display='block';
      document.getElementById('toogle3').style.display='block';
      document.getElementById('toogle4').style.display='block';
      document.getElementById('toogle5').style.display='block';
      document.getElementById('toogle6').style.display='block';
   }
}
--> 
</script>

Code du contenue de l'article caché

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div id="content"> 
	<h4>Tutoriels : Windows 10</h4>
		<a href="" onclick="masquemod('0001');return false;" id="toogle1">01 - Installer Windows 10.</a>
		<div id="0001" style="display:none;">
<p align="center">
 
		Contenue de l'article
 
</p>
		<a href="" onclick="masquemod('0001');return false;" id="toogle1"><br>
		<font  color="red">Fermer</a></font>
		</div>
	<br>
		<a href="" onclick="masquemod('0002');return false;" id="toogle2">02 - Guide super-debloating</a>
		<div id="0002" style="display:none;">
<p align="center">
 
		Contenue de l'article
 
</p>
		<a href="" onclick="masquemod('0002');return false;" id="toogle2"><br>
		<font  color="red">Fermer</a></font>
		</div>
	<br>
		<a href="" onclick="masquemod('0003');return false;" id="toogle3">03 - « The Next Big Tweak ».</a>
		<div id="0003" style="display:none;">
<p align="center">
 
		Contenue de l'article
 
</p>
		<a href="" onclick="masquemod('0003');return false;" id="toogle3"><br>
		<font  color="red">Fermer</a></font>
		</div>
	<br>
		<a href="" onclick="masquemod('0004');return false;" id="toogle4">04 - Supprimer le mot de passe à la sortie de veille</a>
		<div id="0004" style="display:none;">
<p align="center">
 
		Contenue de l'article
 
</p>
		<a href="" onclick="masquemod('0004');return false;" id="toogle4"><br>
		<font  color="red">Fermer</a></font>
		</div>
	<br>
		<a href="" onclick="masquemod('0005');return false;" id="toogle5">05 - Supprimer le mot de passe à la sortie de veille (Seconde méthode)</a>
		<div id="0005" style="display:none;">
<p align="center">
 
		Contenue de l'article
 
</p>
		<a href="" onclick="masquemod('0005');return false;" id="toogle5"><br>
		<font  color="red">Fermer</a></font>
		</div>
	<br>
		<a href="" onclick="masquemod('0006');return false;" id="toogle6">06 - Désactiver l'accès rapide pour revenir à l'affichage classique (ce PC)</a>
		<div id="0006" style="display:none;">
<p align="center">
 
		Contenue de l'article
 
</p>
		<a href="" onclick="masquemod('0006');return false;" id="toogle6"><br>
		<font  color="red">Fermer</a></font>
		</div>
</div>

Dans l'attente d'une réponse de votre pars je vous dis à bientôt

Bien cordialement
deGoer

[SpaceFrog]

Je crois que tu t'es un peu compliqué l'existence

Attention également à tes ouvertures / fermetures de balises

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<font  color="red">Fermer  </a> </font>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<font  color="red">Fermer  </font></a>

voici un code un peu plus sain
http://jsfiddle.net/attt3b2p/9/

avec Jquery
http://jsfiddle.net/attt3b2p/11/

[SylvainPV]

A noter aussi la balise <details> en HTML5 qui est faite pour ça

[deGoer]

Bonjour,


Je vous remercie de vos réponse

Désolé pour mon problème de fermeture de balise.
Je débute donc j’apprends petit à petit et j'ai encore appris quelque chose grâce à vous, et j'aime apprendre et découvrir les choses.

Donc j'ai fais grâce à ton lien "avec jQuery"
Tous fonctionne du moin presque

Il ne veut pas prendre en compte la couleur RED sur FERMER

Comment dois je faire?

Est ce que si je fais ceci c'est correct ? j'ai essayer sa fonctionne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<a href="" class="open">02 - titre </a>
<div class="art" style="display:none;">
  <p align="left">
    contenue de l'artcicle
  </p>
  <a href="" class="close"><font  color="red">Fermer</font></a>
</div>
<br>

Merci d'avance

Bien cordialement