Jquery expand

[wragen22]

@Mottie thoughts?

[Mottie]

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

[wragen22]

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.

[Mottie]

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.

[wragen22]

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

[chrisburton]

@wragen22 `.slideToggle()`?

[Mottie]

Well I don’t have your latest version of the demo, so I just modified mine… [try this demo](http://codepen.io/Mottie/pen/BLzpf)… 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.

$article.siblings().find(‘p,.right-module’)
.slideUp(‘slow’).promise().done(function() {
$article.siblings().removeClass(‘expanded’);
});

@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):

$(function(){

// 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() {
$article.removeClass(‘expanded’);
});
} 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
$article.addClass(‘expanded’);
// slide open to reveal content
$siblings.slideDown(‘slow’);

// find the other (non-current) article contents
$article.siblings().find(‘p,.right-module’)
// 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() {
$article.siblings().removeClass(‘expanded’);
});
}
});

});

[Author]

Posts