Question

I would like to click on a div to make appear his child.
The problem is that I have a long list of those div. Each div has a children.
In the following, I want to click on the div “etiquette” to show or to hide his child div “detail”.

<div class="etiquette">
  <span class="date">13-07</span>
  <span class="titre">LOREM IPSUM 1</span>
     <div class="detail"><p>lorem ipsum 1</p></div>
</div>
<div class="etiquette">
  <span class="date">14-07</span>
  <span class="titre">LOREM IPSUM 2</span>
     <div class="detail"><p>lorem ipsum 2</p></div>
</div>
<div class="etiquette">
  <span class="date">14-07</span>
  <span class="titre">LOREM IPSUM 3</span>
     <div class="detail"><p>lorem ipsum 3</p></div>
</div>

The script I would like to use is :

$(document).ready(function() {
    $(".etiquette").children(".detail").css("display", "none");
    $(this).toggle(function() {
        alert("clicked");
        $(this).children("div.detail").css("display", "block");
    }, function() {
        alert("clicked again");
        $(this).children("div.detail").css("display", "none");
    });
});

the following works well :

$(this).toggle(function() {
    alert("clicked");
});

the following works well, too. But it shows or hide ALL the div “detail” and not only the child of the clicked div :

$(this).toggle(function() {
    alert("clicked");
    $(".etiquette").children("div.detail").css("display", "block");
}, function() {
    alert("clicked again");
    $(".etiquette").children("div.detail").css("display", "none");
});
});

What am I doing wrong ?
Thanks in advance for your help.

Answer 1

Your $(this) points to document itself I guess.

Try this,

$(document).ready(function() {
  $(".etiquette").children(".detail").css("display", "none");
  $(".etiquette").click(function(){
    $(this).children("div.detail").toggle();
  });
});

I did not tested the code. Hope it will work.