Re: Jquery expand

[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’);
});
}
});

});