J'ai installé Firebug, impeccable, merci !

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)

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

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)

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

<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>

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 :
[html]<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>[/html]

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]

:lol: :lol:

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

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

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,

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 :

[code]
/* <![CDATA[ */
/*
|-----------------------------------------------------------------------
| jQuery Toggle Script by Matt - skyminds.net
|-----------------------------------------------------------------------
|
| Affiche/cache le contenu d'un bloc une fois qu'un lien est cliqué.
|
*/
// 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é
jQuery('a.toggler').click(function()
{
jQuery(this).parent().nextAll('.toggle').first().toggle('slow');
return false;
});
});
/* ]]> */
[/code]

J'y fait appel dans ma page html comme suit, malheureusement sans effet :
[code]
<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>
[/code]

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) :
[code]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAY FAIR - Venez révolutionner les délais de paiement !</title>
<!-- Stylesheets -->
<link type="text/css" href="css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,500italic,500,300italic,300'
rel='stylesheet' type='text/css'>
<link type="text/css" href="icons/font-awesome/css/font-awesome.css" rel="stylesheet">
<link type="text/css" href="icons/rondo/style.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/style.css" rel="stylesheet">
</head>
<body >
<header class="header" id="jump">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="" /></a>
</div>
<div class="collapse navbar-collapse hidden-xs">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#jump0">Accueil</a></li>
<li><a href="#jump1">Description</a></li>
<li><a href="#jump2">Bénéfices</a></li>
<li><a href="#jump3">Pionniers</a></li>
<li><a href="#jump4">Pré-inscription</a></li>
<li><a href="#jump5">Testimonials</a></li>
<li><a href="#jump6">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
<div class="collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#jump0" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Home</a></li>
<li><a href="#jump1" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Services</a></li>
<li><a href="#jump2" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Portfolio</a></li>
<li><a href="#jump3" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Pricing</a></li>
<li><a href="#jump4" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Team</a></li>
<li><a href="#jump5" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Clients</a></li>
<li><a href="#jump6" data-toggle="collapse" data-target=".navbar-responsive-collapse">
Contact</a></li>
</ul>
</div>
<!-- /.navbar-responsive-collapse -->
</div>
</nav>
</header>
<div class="jumper" id="jump0">
</div>
<div class="section type-1 big splash">
<div class="splash-cover">
</div>
<div class="container">
<div class="splash-block">
<div class="centered">
<div class="container">
<div class="section-headlines">
<h1>
<font style="font-size: 54.0pt; color: #00b0f0;">PAY</font> <font style="font-size: 54.0pt; color: #f79646;">FAIR</font> </br>
<font style="font-size: 27.0pt; color: #00b0f0;">Venez</font> <font style="font-size: 27.0pt; color: #f79646;">révolutionner</font> <font style="font-size: 27.0pt; color: #00b0f0;">les délais de paiement</font> <font style="font-size: 27.0pt; color: #f79646;">!</font>
</h1>
<p>
<b>Agissons ensemble, pour réduire la gestion des encaissements et leurs impacts sur la trésorerie, au strict minimum !</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="jump1" class="jumper">
</div>
<div class="section type-2">
<div class="container">
<div class="section-headlines">
<font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">Prenez part à </font><font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">une action inédite </font><font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">!</font>
<div>
</br>
<font style="font-size: 13.0pt; font-weight: bold;">AGISSONS ENSEMBLE, POUR REDUIRE AU STRICT MINIMUM</br> LA GESTION DES ENCAISSEMENTS ET LEURS IMPACTS SUR LA TRESORERIE !</font> </br>
</br>
Une entreprise doit en effet pouvoir concentrer 100% de ses moyens sur son cœur de métier pour croître et innover ! </br>
Elle ne doit plus s’épuiser sur les tâches périphériques comme le suivi des délais de paiement.</br>
</br>
<b>C’est le crédo de PAY FAIR dont l’objectif est de <font style="font-size: 11.0pt; font-weight: bold;">LIBERER VOTRE TEMPS, VOTRE BUDGET ET VOS ENERGIES.</font></b> </br>
</br></br>
<font style="font-size: 11.0pt; font-weight: bold;">3 LEVIERS SONT MOBILISES</font> pour cela : </br>
</br>
<ul>
<li> La force d’un <b>réseau</b> d’entreprises fiables qui se soutiennent</li>
</br>
<li> L’application de la <b>loi</b></li>
</br>
<li> L’envie d’<b>éthique</b> dans la vie économique.</li>
</ul>
</div>
</div>
</div>
</div>
<div id="jump2" class="jumper">
</div>
<div class="section type-1" style="padding-bottom: 0">
<div class="container">
<div class="section-headlines">
<font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">Les bénéfices </font><font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">PAY </font><font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">FAIR</font>
<div>
</br>
PAY FAIR s’appuie sur <b>une logique incitative positive pour :</b></br>
<ul></br>
<li><b>Sensibiliser et inciter vos clients à payer dans les temps</b>, voire à améliorer leurs délais de paiement</li>
</br>
<li><b>Vous donner une image de partenaire de confiance</b> afin de bénéficier de conditions d’achats avantageuses auprès de vos fournisseurs</li>
</br>
</ul>
PAY FAIR rassemble <b>une communauté de partenaires potentiels sensibles à la tenue des délais de paiement</b> : un sésame de confiance entre entreprises pragmatiques et éthiques.</br>
</br>
PAY FAIR propose <b>une base de connaissances</b> claire pour <b>maîtriser les aspects contractuels</b> de la relation client- fournisseur et notamment le fonctionnement des délais.</br>
</br>
PAY FAIR en outre donne à ses adhérents <b>de la visibilité en tant qu’entreprises exemplaires</b> (RSE), mais aussi <b>une voix en tant que groupe d’influence</b>.</br>
</br>
</div>
</div>
</div>
</div>
<div id="jump3" class="jumper">
</div>
<div class="section type-2">
<div class="container">
<div class="section-headlines">
<font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">Soyez parmi </font><font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">les pionniers </font><font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">!</font>
<div>
</br>
Le <b>projet</b> PAY FAIR est en <b>phase de pré-lancement</b>. </br>
Nous en profitons pour recruter nos premiers membres et recueillir vos avis.</br>
</br>
Pour réussir, nous devons dans un premier temps réunir un noyau suffisant d’entreprises. </br>
A partir de lui des synergies apparaîtront et des services novateurs pourront être mis en place. </br>
[Et demain plus encore !] </br>
</br>
<b>Nous rejoindre aujourd’hui, c’est soutenir ce projet en disant simplement votre envie que les choses changent. Nous ne vous demandons pas de justifier d’une conduite parfaite !</b>
</div>
</div>
</div>
</div>
<div id="jump4" class="jumper">
</div>
<div class="section type-1 section-contact">
<div class="container">
<div class="section-headlines">
<font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">Pré-</font><font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">inscrivez </font><font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">vous </font><font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">!</font>
<div>
</br>
Merci pour votre confiance et votre engagement !</br>
</br>
<b>Nous revenons vers vous au plus vite, avec des CONDITIONS PREFERENTIELLES.</b>
</div>
</div>

<div class="row">
<div class="col-lg-7 col-lg-offset-1">
<form method="post" action="send_form_preinsc.php" id="preinsc_form">
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" id="nom" name="nom" placeholder="Votre Nom *"><br
class="gap-15" />
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="adremail" name="adremail" placeholder="Votre Email *"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" id="entreprise" name="entreprise" placeholder="Votre Entreprise *"><br
class="gap-15" />
</div>
<div class="col-lg-6">
<select name="taille">
<option value="Moins de 10 salariés">Moins de 10 salariés</option>
<option value="Entre 10 et 49 salariés">Entre 10 et 49 salariés</option>
<option value="Entre 50 et 99 salariés">Entre 50 et 99 salariés</option>
<option value="Entre 100 et 249 salariés">Entre 100 et 249 salariés</option>
<option value="Entre 250 et 499 salariés">Entre 250 et 499 salariés</option>
<option value="Entre 500 et 999 salariés">Entre 500 et 999 salariés</option>
<option value="Plus de 1000 salariés">Plus de 1000 salariés</option>
<option value="Structures d’appui">Structures d’appui</option>
</select></div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="commentaire" name="commentaire" rows="4">Commentaire éventuel</textarea>
</div>
<button id="button-send_preinsc" class="btn btn-block btn-success" type="submit">
Envoyer
</button>
<div id="success_preinsc">
Votre pré-inscription a bien été enregistrée, merci !</div>
<div id="error_preinsc">
Echec de l'enregistrement, essayez à nouveau svp.</div>
</form>
</div>
</div>


</div>
</div>

<div id="jump5" class="jumper">
</div>
<div class="section type-2">
<div class="container">
<div class="section-headlines">
<font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">Et demain </font><font style="font-size: 27.0pt; color: #00b0f0; font-weight: bold;">plus encore </font><font style="font-size: 27.0pt; color: #f79646; font-weight: bold;">!</font>
<div>
</br>
Nos outils pour accompagner ce changement sont déjà là. Ils ont été imaginés en collaboration avec des entrepreneurs « amis ». </br>
Nous continuerons à les faire évoluer en tenant compte de vos besoins. </br>
Ils vous seront proposés dès lors que la communauté sera suffisamment étoffée.</br>
</div>
</div>
</div>
</div>
<div id="jump6" class="jumper">
</div>
<div class="section type-1 section-contact">
<div class="container">
<div class="section-headlines">
<h4>
Contact Us</h4>
<h2>
Let's have a coffee</h2>

<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>

</div>


<div class="row">
<div class="col-lg-4">
<address>
<div class="address-row">
<div class="address-sign">
<i class="icon-map-marker"></i>
</div>
<div style="address-info">
<b>Single Page Responsive Template</b>,<br>
Using Twitter Bootstrap 3,<br>
EGrappler.com
</div>
</div>
</address>
<div class="visible-xs visible-sm">
<br class="gap-30" />
<hr class="gap-divider" />
<br class="gap-30" />
</div>
</div>
<div class="col-lg-7 col-lg-offset-1">
<form method="post" action="send_form_email.php" id="contact_form">
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name *"><br
class="gap-15" />
</div>
<div class="col-lg-6">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email *">
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" name="message" rows="8"></textarea>
</div>
<button id="button-send" class="btn btn-block btn-success" type="submit">
Envoyer
</button>
<div id="success">
Message bien transmis, merci !</div>
<div id="error">
Message non transmis, essayez à nouveau svp.</div>
</form>
</div>
</div>

</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
Meilleur - A Free Responsive Bootstrap 3 Template &copy; 2014 - <a href="http://www.egrappler.com">
EGrappler.com</a>
</div>
</div>
</div>
</footer>
<!--Scripts-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
</body>
</html>
[/code]