Search code examples
jqueryanimationmultiple-instancescss-selectorstoggleclass

JQuery UI (effects core) addClass/removeClass on one element with multiple selectors...but there's a catch

Thanks for taking a look. I'm trying to used the jQ UI addClass / remove Class methods to expand an hr element upon clicking preceding sibling divs. jQ UI effects core enables smooth animated transition between two classes: http://jqueryui.com/demos/removeClass/. Additionally, hr must be added dynamically with $ to achieve the broader site design.

Here are the pieces of the puzzle:

  1. My code renders rows of four 100x100px sibling divs. These divs don't have classes, but FEEL FREE TO ADD THEM IF IT HELPS -- each div will eventually have a unique class. After every 4th div, there's a dynamically added hr.
  2. Upon clicking any given div, the immediate next hr must toggle to the class "open", which causes the row to expand. If this div is then clicked again, it must toggle/remove the class "open" from hr, causing the hr the shrink to it's original size.
  3. If one div is clicked to expand a hr and then another div is clicked, two animations must be triggered: first, the "open" class must be removed, causing the row to shrink back down, and THEN the class must be re-added to reopen the row. However, if, for example, a div is clicked to open the second row, and then a second div preceding the first hr is clicked, this action must first close the second hr and then open the second div's corresponding hr.

I'm stuck. I've tried a number of jQ function combos, but the results are whacky. What you see is the closest I've gotten. Thanks for giving this one a shot. Feel free to add to the code however you can to get this working. 

<!--HTML...the children divs of ".main" can have their own unique classes if that helps-->
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

/*CSS-some of this creates other events not mentioned above. These are simplified versions of what I need for my final site design*/

.main  {
    width: 450px;
}
.main div {
    height: 100px;
    width: 100px;
    background-color: #000;
    margin: 3px;
    float:left;
}
div.select   {
    background-color: #f00;
    border: 2px solid #00F;
    margin: 3px;
    float:left;
    display: block;
}
div.active   {
    background-color: #f00;
    margin: 3px;
    float:left;
    display: block;
}
hr  {
    background-color: #FF0;
    float: left;
    display: block;
    height: 20px;
    width: 450px;
}
hr.open {
    float: left;
    display: block;
    height: 300px;
    width: 450px;

}

/*the JS - sorry about the double quotes.  I'm using Dreamweaver, which seems to add them to everything*/

$(document).ready(function() {
//dynamcally adds the <hr> after every 4th div.
    $(".main div:nth-child(4n)").after('<hr class="closed"></hr>');
//puts a blue border on the squares
    $('.main div').hover(function()  {
        $(this).addClass('select');
    },
    function() {
        $(this).removeClass('select')
    });
//changes the color of the active square to red and "deactivates" the previous one.
    $('.main div').click(function()  {
        $(this).toggleClass('active').siblings().removeClass('active');
    });
//here in lies the problem...???
    $('.main div').click(function()  {
        $('hr').removeClass('open', 1000);
        $(this).toggle
        (function() {
            $(this).nextAll("hr").first().addClass('open', 500);
        },
        function()  {
            $(this).nextAll("hr").first().removeClass('open', 500)
        });

    });
});
Solution

  • I am pretty sure that this is what you want, I copied the general HTML layout from http://makr.com (you mentioned that that was what you wanted):

    Demo: http://jsfiddle.net/SO_AMK/xm7Sk/

    jQuery:

    $(".main article:nth-child(4n)").after('<hr class="split"></hr>');
$(".main > article .slidedown").click(function(e) {
        e.stopPropagation();
}); // If you click on the slidedown, it won't collapse

var canAnimate = true,
    slideIsOpen = false,
    animateSpeed = 1000;

$(".main > article").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
}).click(function() {
    if (canAnimate) {
        canAnimate = false;
        var article = $(this),
            isThisOpen = article.hasClass("active");
        if (isThisOpen) {
            $(".main").queue(function () {
                hideSlide($(this))
            });
        }
        else {
            if (slideIsOpen) {
                $(".main").queue(function () {
                    hideSlide($(this));
                }).queue(function () {
                    positionPage(article, $(this));
                }).queue(function () {
                    showSlide(article, $(this));
                }).queue(function () {
                    positionPage(article, $(this));
                });
            }
            else {
                $(".main").queue(function () {
                    positionPage(article, $(this));
                }).queue(function () {
                    showSlide(article, $(this));
                }).queue(function () {
                    positionPage(article, $(this));
                });
            }
        }
    }
});

function showSlide(elm, main) {
        canAnimate = false;
        slideIsOpen = true;
        elm.nextAll("hr.split").first().addClass("active", animateSpeed);

        elm.children(".slidedown").css("top", (elm.offset().top + 114)).addClass("active").slideToggle(animateSpeed);

        elm.addClass("active");
        main.dequeue();
        canAnimate = true;
}

function hideSlide(main) {
        canAnimate = false;
        $(".main article.active").nextAll("hr.split.active").removeClass("active", animateSpeed);

        $(".main article.active").children(".slidedown").removeClass("active").slideToggle(animateSpeed);

        $(".main article.active").removeClass("active");
        $(main).dequeue();
        canAnimate = true;
        slideIsOpen = false;
}

function positionPage(elm, main) {
    canAnimate = false;
    var body;
    if ($.browser.safari) {
        body = $("body");
    }
    else {
        body = $("html");
    }
    var elmTop = elm.offset().top,
        bodyScroll = body.scrollTop();
    if (bodyScroll - elmTop == 0) {
        var speed = 0;
    }
    else {
        var speed = animateSpeed;
    }
    body.animate({
        scrollTop: elmTop
    }, speed, function () {
        main.dequeue();
        canAnimate = true;
    })
}​

    This may seem like a large script for something so small but it has some fail-safes. The only bug is, if you start clicking quickly during transitions sometimes the queues end up in the wrong order. But, the average user doesn't click quickly during animations :D