Discussion :

[Nonepse]

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

[SpaceFrog]

Code :

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

document.getElementById('read_next_js')

By Id ??
je ne vois pas d'id ...

[Nonepse]

@SpaceFrog: Lorsque j'ai utilisé getElementById j'ai aussi modifié mon code HTML de "<h4 class="read_next_js">Faire derouler la suite</h4>" a "<h4 id="read_next_js">Faire derouler la suite</h4>", comme precisé dans mon post

[SpaceFrog]

tu as donc plusieurs id identiques sur la page ?

[Nonepse]

Oui, je sais que ce n'est pas a faire, mais je ne sais pas comment faire avec class non plus :/

[SpaceFrog]

ce n'est pas que ce n'est pas à faire ... c'est juste que ça ne fonctionnera pas ^^
comme tu utilises jquery tu peux mettre la main sur une collection d'objet par le className...
je ne me rappelle pas de la syntaxe exacte
un turc dans le style

Code :

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

$("[class=foo]")

[Nonepse]

Moui, mais pour etre tout a fait honnête, je ne suis pas très rodé au Javascript/AJAX.
J'ai commence a faire des recherches sur les collection d'objet par le className mais rien de bien concluant

Et pourquoi tu parles de la Turquie ? Rien a voir dans le sujet (joke pourrie inside )

[SpaceFrog]

T'as déja essayé de taper au clavier avec des pattes palmées ??

sinon dans les contributions j'ai proposé un petit script de selection d'objets ...

http://www.developpez.net/forums/d75...filtre-regexp/

[Nonepse]

Non, jamais essayé ^^

Pour ton script, je pense pas que ca soit exploitable dans mon cas.
Admettons que je puisse modifier le code qui génère la page, et que je puisse "numeroter" les id pour avoir un id différent par titre du menu accordéon.
Ensuite, comment faire pour que, lors du clic, on reconnaisse sur quel id on a clique pour pouvoir refermer tous les autres.
Enfin je vois pas trop.


Par contre il y a bien une solution a mon probleme. Mais bon elle ne me plait pas tellement
Je peux toujours gerer ca en dur. Si j'arrive effectivement a numeroter tous les id, je peux faire :
si on clique sur id_1, alors fermer id_2, id_3 et id_4, derouler id_1, transformer le titre de id_1 en "cacher la suite" et transformer les titres de id_2, id_3 et id_4 en "derouler la suite"

C'est degueu au possible, mais pour l'instant je ne vois pas vraiment d'autre moyen...

[SpaceFrog]

onclick => this sera celui cliqué ...
un test dans une boucle sur les elements de la collection

[Nonepse]

Mmmmh je crois que je vois.

Ca donnerait un truc du genre :

derouler contenu de [celui cliqué]
changer titre de [celui cliqué] en "cacher le contenu"

Code :

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

1
2
3
4
5
6
7
8
9
while (concatenation(id_, $var) != id_[dernier numero])
{
if (concatenation(id_, $var) != celui cliqué)
{
cacher le contenu de [concatenation(id_, $var)]
changer titre de [concatenation(id_, $var)] en "derouler le contenu"
}
$var ++;
}

Me trompe-je ?

[SpaceFrog]

oui ou avec une fonction getELementsByclassName
ou getElementsById proposée plus haut

Code :

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

1
2
3
4
5
6
7
8
9
function toggle(obj){
collection=document.getElementsById('classe', 'class');
i=0
while (collection[i]){
     if(collection[i]==obj){ //ici tu es sur l'objet cliqué
                                  }
     else { // ici les autres }
 i++;
}