The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery expand Re: Jquery expand


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() {

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() {