jQuery - How to select child elements of parent?

Question

Sorry if the title is not accurate - I couldn't figure out how to word it.

I have multiple widgets with the same class <div class="widget"></div> - each widget has a title, and content, structured like this:

<div class="widget">
    <div class="widget-title">Title</div>
    <div class="widget-content">Content Here</div>
</div>

The "widget-content" is hidden, and when you click on the widget-title, the content appears, and a class is applied to the widget-title, changing it to "widget-title open". This part works find, and the widget-content opens too.

The problem is, its opening the widget content on ALL widgets. It should only open the widget-content in the specific widget where the title was clicked, not ALL of them. I am not sure what the proper syntax is to use so it only opens the widget-content of the specific widget the user click the title on.

Here is the code I have so far:

$('.widget').find('.widget-title').click(function() {
  $('.widget-content').show('slow', function() {
    // Animation complete.
  });
  $('.widget').find('.widget-title').addClass("open");
});

Could someone please provide a working example? Thanks

Answer 1

$('.widget .widget-title').click(function() {
    $(this)
        .addClass("open")
        .parent().find('.widget-content').show('slow', function() {
            // Animation complete.
        });
});

Answer 2

I think you want this:

$('.widget').find('.widget-title').click(function() {
    $(this).parent().show('slow', function() {
        // Animation complete.
    }).addClass("open");
});

It opens the parent of the selected .widget-title element.