Problème d'affichage de <div>

Par Pandazaur, il y a 11 ans

Javascript

Bonjour tout le monde,

Je ne suis pas très expérimenté en JQuery mais je bloque pour l'affichage d'une div:

HTML

<div class="cards bg-white"> <div class="titre_bloc bg-purple bg-plus-2"><span class="collapse">+</span><span style="margin-left:5px">Commentaire</span></div> <div class="bloc bg-purple"></div> <div class="content"><textarea id="commentaire">'.$res['commentaire'].'</textarea> <script> CodeMirror.fromTextArea(document.getElementById("commentaire"), { lineNumbers: true, mode: "javascript", theme: "monokai", readOnly: "nocursor", indentUnit: 4 }); </script></div> $(document).ready(function(){ $(".content").hide(); $("div.titre_bloc").click(function(ev){ if( $( ev.target ).closest( ".content" ).is(":hidden")) { //$("span.collapse").html("-"); //$( this ).closest( ".content" ).slideDown("50"); $( ev.target ).closest( ".content" ).show(); } else { $("span.collapse").html("+"); $( ev.target ).closest( ".content" ).slideUp("50"); } }) });

Sachant que j'ai un enchainement de morceau de code identique au HTML saisi plus haut.

Le problème c'est qu'en fait lorsque je clique sur le titre_bloc, c'est bien détecté mais apres il ne me fait pas de slide. Quelqu'un a une solution SVP ?

Merci

3 réponses

François Cammas, il y a 11 ans

Hye,
J'ai regardé ton code et il y a un truc qui cloche. Je resume un peu ton dom
div.cards .bg-white
div .titre_bloc .bg-purple .bg-plus-2
span .collapse
span
div .bloc .bg-purple
div .content
textarea #commentaire
Premierement si c'est une bout de code répété, vire l'ID du textarea.
Secondement,
Closest() prend lui meme puis les parents. div.content n'est pas un parent de titre_bloc

$(document).ready(function(){ $(".content").hide(); $("div.titre_bloc").click(function(){ var $parent = $(this).closest('.titre_bloc'); var $content = $parent.find('content'); if( $content.is(":hidden")) { //$parent.find("span.collapse").html("-"); //$content.slideDown("50"); $content.show(); } else { $parent.find("span.collapse").html("+"); $content.slideUp("50"); } }) });

Quand tu tests le Jquery tu peux faire des tests en console.
Par exemple, tu mets un id à une balise et tu testes la fonction et tu regardes le retour, si pas de retour, tu te plantes de fonction ou de manière de l'utiliser.

Pandazaur, il y a 11 ans

Je ne peux pas virer l'id du textarea car j'en ai besoin pour le remplacer par un éditeur en JS. Du coup c'est le truc qui change à chaque fois.

J'ai finalement réussi a m'en sortie avec ce code:

$(document).ready(function(){ $('.content').hide(); // on masque toutes les div.content $("div.titre_bloc").click(function(event){ var $that = $(this); var $parent = $that.closest('.cards'); var $content = $parent.find('.content'); var $collapse = $parent.find("span.collapse"); if( $content.is(":hidden")) { $collapse.html("-"); $content.slideDown("50"); } else { $collapse.html("+"); $content.slideUp("50"); } }) });

Merci de l'aide tout de même

François Cammas, il y a 11 ans

oui si tu veux, tu as pris ce que j'ai fait en adaptant. Nikel !