Forum d'entraide PHPFrance

Bonjour,

Je souhaite faire un site sur une seule page.
Son objectif est d'être efficace en présentant l'essentiel rapidement et simplement.
Je voudrais proposer pour ceux qui souhaitent plus de détail des liens qui font apparaître du texte supplémentaire.
Il me semble que ça s'appelle un toggle et j'ai trouvé un script js pour le faire, que voici :
J'y fait appel dans ma page html comme suit, malheureusement sans effet : Cela a fonctionné quand je l'ai fait avec un seul lien. Mais à partir du moment où j'ai voulu en mettre 2, ça n'a plus marché. Et je souhaite en mettre 4 ou 5 !

Un petit coup de main serait salvateur,

Merci d'avance,

Vince

PS :
totalité de mon code html pour avoir une bonne vision d'ensemble (donc dans lequel on retrouve le bout que j'ia indiqué ci-dessus) :

Normal ! Ta fonction, telle que écrite ne prend en compte que le premier .toggle...

Pour que tous tes toggles puissent toggleriser il faut que ta fonction considère each toggle...
Tu me suis ?
Non ?! Allez, petit cadeau :
http://api.jquery.com/jquery.each/

Bonjour,

Autant j'avais l'impression de suivre ton explication logique, autant le "petit cadeau" me noie totalement, c'est à dire que mes compétences sont largement dépassées là.
Il faut faire une espèce d'itération automatique pour donner un identifiant à des toggles ?

Vince

Absolument, il faut faire un each des vals...

Et via la fonction on() plus simple à mon avis dans ton cas :

[javascript]// On attend que la page soit chargée
jQuery(document).ready(function()
{
// On cache la zone de texte
jQuery('.toggle').hide();
});

// toggle() lorsque le lien avec la classe #toggler est cliqué
$(document).on({
click : function () {
$(this).parent().nextAll('.toggle').first().toggle('slow');
return false;
}
},'a.toggler');[/javascript]

la commande on() ici est activée quand tu cliques sur un lien qui possède la classe "toggler".
Dès que cette fonction est lancée elle cherche le parent direct puis prends tous les frères suivants de ce parent qui possède la classe "toggle" puis sélectionne le premier pour faire le toggle("slow").
Est ce bien ce que tu recherches ?

Si je regarde ton html fournit :

<a href="#" class="toggler" rel="nofollow">Cliquez sur ce premier lien</a>.

<div class="toggle" style="display:none;">Ce texte apparaît grâce à un script javascript écrit pour JQuery et utilise la fonction <code>toggle()</code>.</div>
</br>
<a href="#" class="toggler" rel="nofollow">Maintenant, cliquez sur ce deuxième lien</a>.

<div class="toggle" style="display:none;">Ce texte appartient au 2ème lien.</div>

les balises a.toggler ne sont pas enfants des balises div.toggle donc parent() ne peut pas fonctionner

Aussi, je pense que cela pourra être corrigé par :
[javascript]$(document).on({
click : function () {
$(this).parent().children('.toggle').first().toggle('slow');
return false;
}
},'a.toggler');[/javascript]

Mais ce n'est pas assez spécifique alors peut être que dans ce cas :
[javascript]$(document).on({
click : function () {
$(this).next('.toggle').toggle('slow');
return false;
}
},'a.toggler');[/javascript]

Merci beaucoup pour cette proposition,

Je l'ai testée en remplaçant mon code js et sans modifier mon code html... mais à part me ramener en haut de page c'est tout ce que ça fait.
Ce que je souhaite : c'est qu'en cliquant sur un lien, un texte s'affiche en dessous. Et que je puisse avoir plusieurs liens comme cela. Idéalement j'aimerais un lien pour replier. Avec des symboles comme [+] et [-]. Il ne faut en tout cas pas que l'appui sur un lien [+] ouvre tous les textes "cachés". Et il faut rester au même niveau dans la page pour voir le texte s'afficher.

Merci,

Vince

Fais une console. Ca te donnera le code erreur, car le code de Aureusms me semble tout à fait pertinent
(Console : sous chrome : tu charges ta page web, tu fais F12, tu recharges par F5, et si une croix rouge apparait tu cliques dessus et tu auras ton message d'erreur)

C'est malheureusement beaucoup trop compliqué pour moi.
Je me demande en fait si le souci ne viendrait pas d'une incompatibilité avec d'autres appel à des jump ou toggle dans le reste de ma page html. Possible non ?

Vince

Te décourages pas, on est tous passé par là (surtout moi l'autodidacte).
Perso j'utilise firefox <mode_Troll>zaime pas chrome beurk</mode_Troll> avec l’excellent module complémentaire firebug. Dès que l'utilises, il t’indique tous : les erreurs mais aussi ce qu'il se passe et que les humains ne voient pas (requête Ajax, résultats de variable Javascript, ...) Tu peux même bloquer les scripts javascript afin de regarder se qu'il se passe pas à pas et vérifier si les variables correspondent,... Bref que du bonheur pour développeur.

Je pense que chrome peut le faire aussi mais bon <mode_Troll>zaime pas chrome beurk</mode_Troll> (et en plus firefox est réputé plus performant, moins gourmand en ressources et plus respectueux de tes données privées)

J'ai installé Firebug, impeccable, merci !

Vince