Forum : Spoiler jQuery.

Bonjour/Bonsoir,

J'imagine que mon problème est très simple à résoudre, seulement je n'y connais absolument rien en Javascript.
J'aimerais faire l'équivalent des spoilers sur les forums. Avec un effet slideUp/slideDown. Voici mon code :

jQuery().ready(function() {
    $(".spoiler").next("div").hide();
    $(".spoiler").click(function(){
        if($(this).next("div").is(":hidden")){
            $("spoiler").next("div:visible").slideUp();
            $(this).next("div").slideDown();
        }
    });
});

C'est le code se trouvant sur un des tutos de Grafikart. Le seul soucis c'est qu'avec mon code, mon spoiler se déroule bien, mais quand je reclique dessus, il ne se passe plus rien.

Donc ma question est, comment modifier le code pour que lorsque je reclique sur l'élément spoiler, il s'enroule avec un slideUp ?

Merci d'avance, Aud'.

Flowcki

Réponse acceptée

Désolé du remontage de topic, c'était dans les questions "Il n'y a rien de neuf concernant votre profil" ;)

J'ai pas tout lu mais sinon je pense que tu voudrais ceci : http://jsfiddle.net/Rtransat/bYe27/9/
Quelqu'un sur le channel avait le même problème, je lui ai montré comment faire, donc le code est toujours d'actualité ;)

Il y a le choix, soit avec slideToggle ou sinon avec slideUp/slideDown, il suffit de commenter la première partie et de dé-commenté la 2ème (la 2ème partie est plutôt utile pour rajouter ou supprimer une classe (ou faire autre chose) selon le up ou down.

agrafik

/*
Scripts Grafikart, www.grafikart.fr
*/
$(function(){
 $("ta class ou div").hide();
  $("Liens à cliquer pour masque ou montrer").click(function(){
        $("ta class ou div").slideToggle();
        return false;
  });
})

Fonction également présente dans un tutoriels, j'espère que sa t'aidera (il faut utiliser slide Toggle non SlideUp ou SlideDown mais je sais plus pourquoi. )

Aude

Auteur

Qu'est-ce que je dois mettre dans "Liens à cliquer pour masquer ou montrer" ?

Donovan

Le lien qui permet de montrer ou cacher le spoiler.

Aude

Auteur

Mais.. Y'a pas de lien, c'est juste un titre auquel je voudrais rattacher un spoiler avec des photos à l'intérieur. *Ou alors je n'ai rien compris*

Donovan

Le titre c'est le "lien".

Partie HTML (illustration) :

<h1 id="mon_titre" style="cursor:pointer;">Mon Titre</h1>
<div id="mon_image">
    <img src="L'URL DE L'IMAGE ..." alt="" /><br />
    <span class="caption">Un image =3</span>
</div>

Partie javascript :

$(function(){  
  $("#mon_image").hide();  
  $("#mon_titre").click(function(){  
        $("#mon_image").slideToggle();  
        return false;  
  });  
});

agrafik

$(function(){  
$("#content").hide();  
$("h1").click(function(){  
$("#content").slideToggle();  
return false;  
});  
})

Ceci veut dire, pour cet exemple, que la div d'ID "content" est masquée par défaut et que si tu veux la cliquer tu clique sur le H1 (le titre donc).

Si toi tu veux masquer par défaut la div contenant l'image, tu remplace dans ce code #content, pas #nom_de_ton_id et et marque à quel condition on doit afficher ce CONTENT (pour mon exemple c'est cliquer sur H1 uand tu essaie de lire le code tu peux le comprendre assez simplement tu vois là) donc toi si il faut pas cliquer sur un H1 mais sur un p ou un span tu remplace h1 par p ou span. Regarde la vidéo d'initiation au jquery ^^

Aude

Auteur

Merci pour ces précisions Xeron, mais au risque de faire ma boulette.. Ca marche super bien, mais le problème c'est que lorsque je clique sur le h1 de ma deuxième catégorie, le spoiler se fait sur le h1 de ma première catégorie.. Normal ? :/

agrafik

Je comprend pas trop ce que tu veux, tu pourrais me mettre ton code HTML pour que je vois (avec les deux catégories). Normalement si tu clique sur 1 H1 (si tu as défii seulement h1 et rien d'autre tu doiss réussir, mais sait-on jamais j'ai peu-être oublié quelque chose )

Benoit

oui c'est normal, dans le code javascript présent au dessus il est dit que si on clique sur un h1 alors la fonction va s'exécuter. Toi ce que tu veux c'est que quand tu clic sur le spoiler en question ce ne sois que ce spoiler qui s'affiche ('fin je pense que c'est ça lol) mais tu vas surement mettre toujours les mêmes div avec class spoiler je suppose et ben ce que tu dois faire c'est simplement de mettre un next. On va donner un exemple de code:

<h1 class="titre-spoiler">Dévoilez/caché le texte</h1>
<div class="spoiler">Bouh</div>

et bien en javascript tu devras faire ça:

$(function($(".titre-spoiler").next()== hide){
    if(condition) {
        $(".titre-spoiler").next().hide();
    }
    else{
        $(".titre-spoiler").next().show();
    }
        return false;

Normalement ça devrais marché, je l'ai bidouillé vite fait xd

Spoiler jQuery.

10 réponses