Jquery click/show/hide
Marc
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- If show jquery
- Usb show - Télécharger - Sauvegarde
- Show key plus - Télécharger - Utilitaires
- Media show pro - Télécharger - Présentation
- Smart show 3d - Télécharger - Visionnage & Diaporama
- Photo show - Télécharger - Albums photo
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:
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
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
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.
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:
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
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
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
Bonjour,
Il faut déjà mettre des ID à tes éléments.. sinon. impossible de les "localiser"..
Voila :
Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane
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
