Grow your CSS skills. Land your dream job.

Help connecting dots

  • # December 24, 2012 at 1:43 pm

    Hello,
    I feel I am very close to getting my js to work.

    This is what i started with:
    $(‘article p, article .font-btns’).hide();
    var _this = this;
    $(‘article h1′).addClass(‘pointer’).click(function() {
    $(this).siblings().slideToggle(‘slow’).parent().toggleClass(‘expanded’);
    });

    And i’m trying to implement the functionality of this here.
    var _this = this; // because this will point to a different object inside the callback
    $(this).siblings().slideToggle(‘slow’, function() {
    $(_this).parent().toggleClass(‘expanded’);
    });

    Much thanks.

    # December 24, 2012 at 1:55 pm

    Can you hook up a [Codepen](http://codepen.io) please. And explain what you’re trying to achieve in a clearer fashion.

    # December 24, 2012 at 2:24 pm

    http://codepen.io/wragen22/full/sqrlD I am trying to get the background color and paragraph info to slidetoggle up all at once. Currently you can see the background color will dissapear and then the div will slide up. Instead of in sync.

    # December 24, 2012 at 3:18 pm

    I don’t get it it looks fine to me and can you explain it in more detail

    # December 24, 2012 at 4:03 pm

    the current code – when the div is expanded and you click to close, the background disappears first and then the div will slide up to a close. Instead of a synchronous slide up with background and text. Apparently I can fix this issue with a callback. Just not sure how to do this.

    # December 24, 2012 at 5:51 pm

    I’m no jQuery guru, so I’m sure this could be cleaned up, but this should accomplish your goal:

    $(‘article h1′).addClass(‘pointer’).click(function() {
    var $article = $(this).parent(),
    $siblings = $(this).siblings();
    if ($article.hasClass(‘expanded’)) {
    $siblings.slideToggle().promise().done(function() {
    $article.removeClass(‘expanded’);
    });
    } else {
    $article.addClass(‘expanded’);
    $siblings.slideToggle();
    }
    });

    # December 24, 2012 at 6:43 pm

    That it! Thank you @TreeRoot !

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".