Sujet Précédent Sujet Suivant

Jquery click/show/hide

Fermé
Marc - Modifié par Marc le 30/12/2014 à 15:28
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 3 janv. 2015 à 15:41
Bonjour,

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:

3 réponses

Réponse 1 / 3
Marc
30 déc. 2014 à 19:33
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
0
Réponse 2 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 1/01/2015 à 16:10
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.
0
Marc
2 janv. 2015 à 20:24
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
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 3/01/2015 à 15:48
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
0
Réponse 3 / 3
jordane45 Messages postés 38321 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 décembre 2024 4 707
Modifié par jordane45 le 30/12/2014 à 15:58
Bonjour,

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
-1
Marc
Modifié par Marc le 30/12/2014 à 16:48
Merci beaucoup, j'ai réadapté le script pour minimiser mon code HTML (notamment l'écriture des id), ça fonctionne comme je le souhaite.

Merci encore et bonne fin de journée
0

Discussions similaires

Fonction if exist et else
Xena3 -
Xena3 -

6 réponses
Créer un site de Live show comme Eurolive
awesomeguyaw -
bg62 -

5 réponses
A quoi sert la sortie IF OUT démodulateur?
LesNulsCCM -
Graffitir -

3 réponses
Test IF a plusieurs condition en PHP
Bilibob -
Dead45 -

5 réponses
The Realtek Network Controller was not found
Maxime949 -
kaneagle -

1 réponse