Bonjour,

J'utilise un menu accordéon sur mon site dont voici le code (basé sur ce tutoriel : http://blog.arnaud-k.fr/2009/develop...enu-accordeon/) :

Coté JavaScript :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
$(document).ready(function()
{
  $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon)
  $('h4').click(function() // si on clique sur un titre (ici tous les elements contenu en les balises h4)
  {
	$('.accordeon').slideUp();
	$(this).next('div:hidden').slideDown(); // on deroule le div cache qui suit directement le titre
  });
});

Coté HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<h4 class="read_next_js">Faire derouler la suite</h4>
<div class="accordeon">
	<div class="content-for-js">Texte a derouler/cacher</div>
</div>

Ma page est générée automatiquement par DotClear. <h4 class="read_next_js">Faire derouler la suite</h4> apparait donc plusieurs fois sur la page.

Maintenant voila mon problème :
Une fois le texte déroulé, j'aimerais que le "Faire derouler la suite" se transforme en "Cacher la suite".

J'ai d'abord pensé à un tel code :
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
$(document).ready(function()
{
  $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon)
  $('h4').click(function() // si on clique sur un titre (ici tous les elements contenu en les balises h4)
  {
	$('.accordeon').slideUp();
	if (document.getElementsByClassName('read_next_js')[0].innerHTML == 'Faire derouler la suite')
	{
		document.getElementsByClassName('read_next_js')[0].innerHTML = 'Cacher la suite';
	}
	else if (document.getElementsByClassName('read_next_js')[0].innerHTML == 'Cacher la suite')
	{
		document.getElementsByClassName('read_next_js')[0].innerHTML = 'Faire derouler la suite';
	}
	$(this).next('div:hidden').slideDown(); // on deroule le div cache qui suit directement le titre
  });
});

Evidemment ca ne fonctionne pas vu que ca n'agit que sur l'objet 'read_next_js' du numéro spécifié (dans ce cas, le numéro 0, cad le premier).

J'ai donc essayé d'utiliser getElementById plutot que getElementsByClassName.

Mon code JavaScript donnait donc ca :
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
$(document).ready(function()
{
  $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon)
  $('h4').click(function() // si on clique sur un titre (ici tous les elements contenu en les balises h4)
  {
	$('.accordeon').slideUp();
	if (document.getElementById('read_next_js').innerHTML == 'Faire derouler la suite')
	{
		document.getElementById('read_next_js').innerHTML = 'Cacher la suite';
	}
	else if (document.getElementById('read_next_js').innerHTML == 'Cacher la suite')
	{
		document.getElementById('read_next_js').innerHTML = 'Faire derouler la suite';
	}
	$(this).next('div:hidden').slideDown(); // on deroule le div cache qui suit directement le titre
  });
});

Et mon code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<h4 id="read_next_js">Faire derouler la suite</h4>
<div class="accordeon">
	<div class="content-for-js">{{tpl:EntryContent}}</div>
</div>
La encore ça ne fonctionnait pas, ça n'agissait que sur le premier objet 'read_next_js'.

Je me suis donc lancé dans des expérimentations foireuses de $(this) à la place de document, mais je vous passe les détails... Rien de concluant, le menu accordéon ne fonctionnait même plus.


Donc voila je m'adresse donc à des gens plus éclairés que moi dans le domaine, puissent-ils m'apporter la lumière ^^ et m'aider à résoudre ce problème

Merci pour vos réponses