jquery click bind not working when I use this

Question

So I am trying to make a section that folds up when the title is clicked on. It works if I use the following but obviously folds all sections up instead of just the clicked on:

$(".foldUpSection").find(".header").click(function()
{
    $(".foldUpSection").find(".foldMeUp").slideToggle();
});

I switched it to

$(".foldUpSection").find(".header").click(function()
{
    $(this).find(".foldMeUp").slideToggle();
});

but this does nothing. Am I missing something to why it is not passing the this on click?

Here is the HTML

<div class="foldUpSection">
    <span class="header">Unprocessed EDIs</span>
    <div id="unprocessedEdi" class="foldMeUp">
    </div>
</div>

gvee · Accepted Answer · 2013-09-18 15:00:45Z

4

In that context this refers to $(".foldUpSection").find(".header")

the find() function looks for descendants of a selector and $(".foldUpSection").find(".header") has no descendants with a class of foldMeUp.

answered Sep 18, 2013 at 15:00

gvee

17.2k42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Milche Patern Over a year ago

This is not this, easy. That was not this either.

Jeff Over a year ago

Ah! Excellent answer! Now I understand my issue, I was at the same level as the object I was looking for, not over it! That makes sense, appreciate it.

Joseph Silber · Accepted Answer · 2013-09-18 14:58:40Z

1

If the DOM structure is not set in stone (so that you might have other elements between .header & .foldMeUp, use this:

$(".foldUpSection").find(".header").click(function()
{
    $(this).closest(".foldUpSection").find(".foldMeUp").slideToggle();
});

Here's the fiddle: http://jsfiddle.net/jEgK4/

answered Sep 18, 2013 at 14:58

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Comments

Milche Patern · Accepted Answer · 2013-09-18 15:03:22Z

1

Using $(this) and .find() made you target the wrong element.

Use .next() or .siblings(), find() searches for children, foldmeup is a sibling

   $(this).siblings(".foldMeUp").slideToggle();

or

 $(this).next(".foldMeUp").slideToggle();

DEMO

Documentation for .find()

edited Sep 18, 2013 at 15:03

Milche Patern

20.7k6 gold badges39 silver badges53 bronze badges

answered Sep 18, 2013 at 14:57

Anton

32.6k5 gold badges47 silver badges54 bronze badges

2 Comments

Jeff Over a year ago

Ah sweet, any reason why find doesn't work in a passed DOM object?

Anton Over a year ago

it would works if you use find from .foldUpSection because .foldMeUp is a child of that element. .find() is a lot like .children()

Collectives™ on Stack Overflow

jquery click bind not working when I use this

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related