The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Jquery expand

  • # January 21, 2013 at 4:43 pm

    @Mottie thoughts?

    # January 21, 2013 at 4:51 pm

    Oh sorry, it’s really not that big a deal to use promise instead of the callback. Is it working now?

    # January 21, 2013 at 4:54 pm

    Yes, it is working. But I guess I am still unsure as to why I couldn’t get the desired functionality with the callback like you recommended.

    # January 21, 2013 at 6:18 pm

    It’s because there are multiple `$siblings`. When using the callback function, each individual sibling element will a callback on themselves to remove the class name after each animation has completed. Whereas, the `promise().done()` will remove the class names only after ALL of the sibling elements have completed their animation. It makes a difference because the css transition is applied to the class name being manipulated.

    # January 21, 2013 at 10:19 pm

    @Mottie ah ok… Another question – I’m trying to get the expanded box to slide back up if another is clicked. Any idea?

    # January 21, 2013 at 10:54 pm

    @wragen22 `.slideToggle()`?

    # January 22, 2013 at 12:25 am

    Well I don’t have your latest version of the demo, so I just modified mine… [try this demo](… basically I added the bit of code (seen below) that runs when expanding an article, it finds the siblings of `.grid` and slides them up.

    .slideUp(‘slow’).promise().done(function() {

    @chrisburton I actually didn’t use `slideToggle()`, I separated it into `slideUp()` and `slideDown()` really just to make the code easier to read, and to ensure they are sliding the right way (hiding non-current blocks).

    Here is the full code (with comments):


    // close all articles
    $(‘.grid p, .grid .right-module’).hide();
    // give the articles the finger! so we know they are clickable
    $(‘.grid h1’).addClass(‘pointer’).click(function() {
    // each article block has a class name of grid
    var $article = $(this).closest(“.grid”),
    // find the stuff to slide up/down inside the article
    $siblings = $article.find(“p,.right-module”);

    // if the article is expanded, then hide stuff
    if ($article.hasClass(‘expanded’)) {
    // hide the stuff inside the article, and after ALL the animation
    // is done, add the expanded class (css background color transition)
    $siblings.slideUp(‘slow’).promise().done(function() {
    } else {
    // article isn’t expanded, but it was clicked, so lets show it!
    // remember this class has a css transition, so the color fades in
    // while the content slides down
    // slide open to reveal content

    // find the other (non-current) article contents
    // slide that content up (hide it)
    // once all animation has completed, remove the expanded class
    // this is pretty much the same as above, except it’s targeting
    // ALL of the other articles (siblings) on the page.
    .slideUp(‘slow’).promise().done(function() {


Viewing 7 posts - 16 through 22 (of 22 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed