Question

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(".social_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?

Answer 1

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