Toogle et modification dynamique de lien innerHTML

**puta2000** · 04/09/2013, 18h15

Bonsoir,

Je suis tout débutante en javascript et j'ai donc beaucoup de lacunes et pas forcément de bons raisonnements, j'aurais donc besoin d'un petit coup de pouce.

Voici le soucis que je rencontre : J'ai une page qui comporte un petit jquery SlideUp/SlideDown, je me suis inspiré d'un tuto trouvé sur le net. S'agissant d'une newsletter, ce script permet de dérouler un paragraphe caché d'un article lorsque l'on clique sur le lien "lire" correspondant, puis de le cacher de nouveau en recliquant, et le cas échéant lorsque l'on déroule un autre article, celui qui était déjà déroulé se referme également.

Voici la portion de code correspondante :

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
<!doctype html>
<html>
<head>
	<title>Test</title>
	<script type="text/javascript" src=""http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js""></script>
</head>
 
<body>
 
	<article>
		<p>Partie du texte qui reste visible</p>
		<p class="deroulant">Partie du texte qui est cachée et qui se déroule avec l'événement click sur le lien en dessous</p>
		<a class="lire" href="" alt="">Lire</a>	
	</article>    
	<article>
		<p>Partie du texte qui reste visible</p>
		<p class="deroulant">Partie du texte qui est cachée et qui se déroule avec l'événement click sur le lien en dessous</p>
		<a class="lire" href="" alt="">Lire</a>	
	</article>
	<!-- Et d'autres articles, etc... -->		
 
 
<script type="text/javascript">
$(document).ready( function () {
    $(".deroulant").hide();
        
    $("a.lire").click( function () {
        
                        // Si le déroulant visé est ouvert, le lien refermera celui-ci
                        if ($(this).prev(".deroulant:visible").length != 0) {
                                $(this).prev(".deroulant").slideUp("slow");
                        }
 
                        // Si un autre déroulant que celui visé est ouvert, il se refermera       
                        else {
                                $(".deroulant").slideUp("slow");                
                                $(this).prev(".deroulant").slideDown("slow");
                                }
        
        return false;
    });    
 
 
} ) ;
</script> 
 
	</body>
</html>

J'aimerai maintenant modifier dynamiquement le lien qui déclenche l’événement click pour que son texte se transforme en "Fermer" lorsque le paragraphe est déroulé. J'ai réussi à obtenir de bons résultats avec le code ci-dessous, mais voici enfin mon problème : si l'on clique sur le lien qui s'appelle désormais "Fermer", il redevient "Lire", par contre si je le laisse ouvert et que je déroule un autre article, le premier article se referme mais son lien reste "Fermer".

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
26
<script type="text/javascript">
$(document).ready( function () {
    $(".deroulant").hide();
 
    $("a.lire").click( function () {
 
			// Si le déroulant visé est ouvert, le lien refermera celui-ci
			if ($(this).prev(".deroulant:visible").length != 0) {
				$(this).prev(".deroulant").slideUp("slow");
				this.innerHTML = 'Lire';// Ca, pas de soucis, ça fonctionne
			}
 
			// Si un autre déroulant que celui visé est ouvert, il se refermera        
			else {
				$(".deroulant").slideUp("slow");
				$(this).prev(".deroulant").slideDown("slow");
				$("a.lire").innerHTML = 'Lire'; // Ca par contre ça marche pas et c'est ça qui me pose problème!!
				this.innerHTML = 'Fermer';// Ca aussi ça fonctionne
				}
 
        return false;
    });    
 
 
} ) ;
</script>

Sauriez-vous m'indiquer ce qui cloche dans mon script, s'il vous plait? (Désolée d'avoir été longue, je voulais m'assurer d'être bien précise). Merci par avance!

**NoSmoking** · 04/09/2013, 19h04

Bonjour,
ligne 4 de la source HTML, il y a une apostrophe en trop ce qui fait que jQuery n'est pas chargé.

S'agissant d'une newsletter, ce script...

le javascript n'est pas recommandé dans une newsletter, de même que l'utilisation du HTML5, pour être sûr d'être bien reproduite il faut encore mieux codé en HTML4 associé à un charset UTF-8.

**puta2000** · 04/09/2013, 20h17

Oui l’apostrophe c'est de ma faute, ça n'y est pas dans mon fichier, j'ai juste doublement copié-collé l'adresse en laissant les précédents guillemets, faute d’inattention en rédigeant le post.

En fait, il ne s'agit pas de la version mail, qui est toute simple pour sa part, mais de la page web vers laquelle le lecteur est redirigé s'il veut lire l'article en ligne, ça ne devrait donc pas poser de problème, si?

Par ailleurs, à part la ligne 17 de mon script (deuxième version) tout le reste fonctionne très bien.