Help connecting dots

[wragen22]

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.

[Andy Howells]

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

[wragen22]

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.

[wragen22]

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.

[TreeRoot]

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();
}
});

[wragen22]

That it! Thank you @TreeRoot !

[Author]

Posts