CODEWITHSUNDEEP
jquerythischildren
Nicolas Gut
Nicolas Gut

Reputation: 13

$(this) seems not properly work

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.

Upvotes: 1

Views: 86

Answers (4)

Ram
Ram

Reputation: 144739

change this:

$(this).toggle(function() {

to:

$('.etiquette').toggle(function() {

this this refers to the document object not .etiquette element.

note: as of jQuery 1.7 using toggle mouse event has been deprecated.

http://jsfiddle.net/f9BcB/

Upvotes: 0

Malarky44
Malarky44

Reputation: 45

Have you tried binding a toggle function to each div using .each function?

ex:

$('.etiquette').each(function(){
  $(this).click(function(){
    //Enter toggle function here
  });
});

Upvotes: 0

j08691
j08691

Reputation: 208030

$(".etiquette").children(".detail").css("display", "none");
$('.etiquette').click(function() {
    $(this).find('.detail').toggle();
});​

jsFiddle example

There's too much to go into about what's wrong with your code, however if you look at this example you'll see what it does. The first line hides all elements with the class detail that are children of elements with the class etiquette (which you had and I left unchanged). The next block of code binds the click event to the elements with the class etiquette and toggles the display of the child element with the class of detail.

Upvotes: 0

Matt
Matt

Reputation: 1973

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.

Upvotes: 1

Related Questions