Problème d'affichage de <div>
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
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
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.