jQuery nested class selector

I'm currently trying to figure out a small but anoying problem with a jQuery script that I am using. You can see the problem and script here : http://jsfiddle.net/nRD4L/12/

I am using this script

(function($, undefined) {
$(document).ready(function() {
    var $container = $(".update_content");

    $container.find(".social_media_updates_extended_view").hide();

    $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
        var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200);

        $container.find(".soci开发者_StackOverflowal_media_updates_extended_view").not($view[0]).stop(true).fadeOut(200);
    })
})
})(jQuery);

With the HTML below the script works fine but when I make a small change (check out the HTML below) it does not work due to a change in HTML strcuture.

<div class="wrapper_update">
<div class="update_content">
    <div class="social_media_updates_extended_view">
        <p>Karel de Bruin</p>
    </div>
    <div class="wrapper_update_extend">
        <div class="update_extend">
            <span class="btnFadeIn">fade button span</span>
        </div>
    </div>
</div>

The HTML above works fine but the HTML below does not work because now the div .wrapper_update_extend is not within the div.update_content.

<div class="wrapper_update">
<div class="update_content">
    <div class="social_media_updates_extended_view">
        <p>Karel de Bruin</p>
    </div>
    <p>content</p>
</div>
<div class="wrapper_update_extend">
    <div class="update_extend">
        <span class="btnFadeIn">fade button span</span>
    </div>
</div>

So I need to change the script a bit to find the class .social_media_updates_extended_view witihin the class .update_content.

Anyone got a tip for this?

---

Here is a working example. However I'm unsure why you would want to change the structure of your content like that?

---

Set the $container to the appropriate selector (or to $('body') if you can't find better one)

---

The code you have assumes a few things:

everything you want is under .update_content.

.wrapper_update_extend is preceded by a .social_media_updates_extended_view, and that's the one you want to show.

You break both things with the code below. I can't tell from the code what you want with the second thing, so I can't indicate how to improve it I'm afraid.

---

Here is a working jsfiddle. http://jsfiddle.net/YsMwj/
I changed the container from

var $container = $(".update_content");

to

var $container = $(".wrapper_update");

Then changed the selector for $view from

var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200);

to

var $view = $(this).closest(".wrapper_update_extend").prev(".update_content").children(".social_media_updates_extended_view").stop(true).fadeToggle(200);