<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>Lien vers toutes les versions de jQuery où vous pourrez prendre la dernière version et choisir en minifié ou non: https://code.jquery.com/jquery/
//la ligne suivante dit à jQuery d'attendre que la page soit complétement chargée
$(document).ready(function() {
//si un clic est identifié sur le lien, on emploi la function suivante
$("a#lelien").click(function() {
$("#madiv").toggle(500); //500 est le nombre de millisecondes (soit 0.5 secondes) pour afficher ou cacher la div
return false; //comme c'est un lien, on lui indique de ne rien retourner
});
});
<a href="#" id="lelien">Cliquez ici</a>
<div id="madiv" style="display:none;"> <!-- par défaut, on cache la div avec display none, comme ça si JavaScript n'est pas activé sur le navigateur du visiteur, elle sera quand même cachée -->
Ici le contenu de la div.
</div>
<div class="ouvrirProchainElement">Cliquer ici pour afficher le prochain élément de cette div</div>
<!-- on crée le prochain élément, chose importante, il faut de base ne pas l'afficher avec display:none -->
<p style="display:none">Je suis l'élément qui suit la div "ouvrirProchainElement", je peut être n'importe quel élément HTML, div, p, h1, form, etc..</p>
$(document).on("click",".ouvrirProchainElement",function(){
$(this).next().toggle(500);
return false;
});
Valerie77 le 13 Février 2022 à 19:42
Bonjour,
La nouvelle version "automatique" m'intéresse et fonctionne très bien en local mais lorsque j'envoie mes pages sur le serveur de mon hébergeur, le script ne fonctionne pas. Il ne se passe rien lorsque je clique sur un lien pour afficher la div correspondante. Avez-vous une idée d'où vient le problème ? Merci de votre aide.
Valérie
admin le 01 Mars 2022 à 14:38
Bonjour, il faut impérativement que l'élément à ouvrir soit juste après l'élément ayant la classe ".ouvrirProchainElement"
Regardez si votre console n'affiche pas d'erreur : Touche F12 > Console
Valerie77 le 03 Mars 2022 à 19:49
Merci pour votre réponse. Finalement j'ai abandonné car je ne trouvais pas pourquoi ça ne fonctionnait pas. De plus ça m'obligeait à revoir mon code html et css donc j'ai repris mon code précédent. Il me semblait pourtant que tout était bon. Je verrai peut-être quand j'aurai plus de temps libre. Merci en tout cas.
Valérie
admin le 03 Mars 2022 à 19:51
Désolé de pas vous avoir répondu plus tôt, bonne continuation.
Valerie77 le 04 Mars 2022 à 10:26
Bonjour, ne le soyez pas. Vous avez pris sur votre temps pour me répondre. D'autres ne répondent jamais à nos questions, même pour des tutos payés. Bonne fin de semaine :-)
Valérie
admin le 04 Mars 2022 à 10:26
Merci !