Jquery click/show/hide
Bonjour,
dans ma structure HTML j'ai un petit bout de structure comme suit:
Via JQuery je souhaite ajouter un paragraphe <p> après chacun des titres: .after()
De base, les paragraphes doivent être cachés: .css("display", "none")
Et ensuite (c'est là que ça se complique pour moi), je veux que lorsque je clique sur par exemple sur Titre 1, son paragraphe s'affiche et les autres restent cachés.
Si je clique sur Titre 2, le paragraphe de Titre 1 se cache et celui de Titre 2 s'affiche.
J'étais parti sur quelque chose comme cela:
Pour le moment, tous les paragraphes s'affichent lorsque je clique sur un titre. Je sais pas comment utiliser this ou find() ici (si besoin en ait).
Merci
dans ma structure HTML j'ai un petit bout de structure comme suit:
<h4 class="drop">Titre 1</h4> <h4 class="drop">Titre 2</h4> <h4 class="drop">Titre 3</h4> etc...
Via JQuery je souhaite ajouter un paragraphe <p> après chacun des titres: .after()
De base, les paragraphes doivent être cachés: .css("display", "none")
Et ensuite (c'est là que ça se complique pour moi), je veux que lorsque je clique sur par exemple sur Titre 1, son paragraphe s'affiche et les autres restent cachés.
Si je clique sur Titre 2, le paragraphe de Titre 1 se cache et celui de Titre 2 s'affiche.
J'étais parti sur quelque chose comme cela:
$(function() {
var p = "<p>Mon paragraphe</p>";
$(".drop").after(p);
$("p").css("display", "none");
// A modifier :
$(".drop").click(function() {
$("p").show();
});
})
Pour le moment, tous les paragraphes s'affichent lorsque je clique sur un titre. Je sais pas comment utiliser this ou find() ici (si besoin en ait).
Merci
3 réponses
-
J'ai une autre question qui me vient à l'esprit:
J'ai placé mes titres dans une section avec un id comme suit:
<section id="production"> <h4 id="elem1" class="drop">Titre 1</h4> <h4 id="elem2" class="drop">Titre 2</h4> <h4 id="elem3" class="drop">Titre 3</h4> </section>
j'ai d'autres pages HTML avec la même structure (une section avec un autre id, suivi de mes titres) pour lesquelles je souhaite appliquer mon script. Comment dois-je m'y prendre pour créer un appel à ce script en lui passant en paramètre l'id de la section en question?
Merci -
Salut
utiliser des id n'est pas indispensable et rallonge inutilement le code
tu pourrais utiliser $(this).next() pour sélectionner le paragraphe qui suit le titre h4 sans meme qu'il y ait un id ou meme une class
http://jquery.developpeur-web2.com/documentation/parcours/next.php
de plus tu pourrais faire un petit effet d'apparition ou de slide avec slideUp et slideDown ou animate
voici un exemple
tu mets la class titre à tes h4 et la class text à tes paragraphes
dans ton css tu mets tes .text en display:none; et opacity:0.4;
et le jquery
$(document).ready(function(){$(".titre").click(function()
{$(".text").animate({opacity:.4},100).slideUp("300").delay("400");
if(!$(this).next().is(":visible")){$(this).next().slideDown("500").animate({opacity:1},1e3)}
if($(this).next().is(":hidden")){$(this).next().css("opacity","0.4")}
})});
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.-
Exact, je me disais bien qu'il était possible de contourner les id, je n'avais pas penser à la fonction next(). Je viens de tester ça fonctionne très bien, merci.
Sinon, est-ce possible d'avoir une aide concernant mon précédent post:
"J'ai placé mes titres dans une section avec un id comme suit:
<section id="production"> <h4 id="elem1" class="drop">Titre 1</h4> <h4 id="elem2" class="drop">Titre 2</h4> <h4 id="elem3" class="drop">Titre 3</h4> </section>
j'ai d'autres pages HTML avec la même structure (une section avec un autre id, suivi de mes titres) pour lesquelles je souhaite appliquer mon script. Comment dois-je m'y prendre pour créer un appel à ce script en lui passant en paramètre l'id de la section en question?"
Merci -
solution préconisée
mets une class à tes h4 (la meme pour toutes les pages) et une classe a tes p (enfin ceux ou tu veux que le script s'applique) puis applique le jquery sur ces class ca sera plus facile a gérer si ton site prend plus de pages
donc le parent #production tu t'en fiche en fait.
sinon il y la solution (pas recommandée)
$("#production h4, #production1 h4, #production2 h4, #production3 h4").click(function() ...etc
mais chaque fois que tu rajouteras une page ou des sections avec des id différentes il faudra rajouter ca dans ton js. donc à la longue ce n'est pas vraiment recommandé de faire ainsi.
apres le mieux avec la solution 1
tu mets le srcipt dans un fichier js tu le mets dans un dossier nommé js et tu l'appelle comme ca pour chaque page ou tu en as besoin
<script src="js/monjs.js"></script> et evidemment avant tu appelles jquery
Ainsi en cas de trnsformation tu as un seul fichier a gerer
tu peux aussi regrouper tous tes js dans un seul fichier et le minifier
-
-
ModérateurBonjour,
Il faut déjà mettre des ID à tes éléments.. sinon. impossible de les "localiser"..
Voila :<html> <head> <title> TEST </title> <!-- Import du JQUERY --> <script src="jquery/jquery.1.11.2.js"></script> </head> <body> <pre> <h4 id="elem1" class="drop">Titre 1</h4> <h4 id="elem2" class="drop">Titre 2</h4> <h4 id="elem3" class="drop">Titre 3</h4> </pre> <script type="text/javascript"> $(function() { $(".drop").each(function(){ var idP = $(this).attr('id'); var p = "<p id='P_"+idP+"'>Mon paragraphe " + idP + "</p>"; $(this).after(p); }); $("p").css("display", "none"); $(".drop").click(function() { $('p').hide(); var id = $(this).attr('id'); $("#P_"+id).show(); }); }) </script> </body> </html>
Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
