Changement des titres d'un menu accordeon
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:
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:
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:
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:
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:
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 :)
