Question

How can I my CSS styling background and text to slide up into the jQuery action smoothly? Right now upon clicking again to close, the background color will disappear and then the text will slide up. I want the background to to stay and slide up with the text.

I am also trying to figure out how to get one action to close upon clicking on another. My code is here.

Answer 1

It’s not totally obvious but, in this line of code:

  $(this).siblings().slideToggle('slow').parent().toggleClass('expanded');

The slideToggle function is actually going to run in an asynchronous fashion. That is, it’s highly likely toggleClass will run before the animation finishes. If you read up on the jQuery docs for slideToggle you will see it accepts a callback function as an optional parameter. Any time you want to make sure a piece of code runs AFTER the animation is done then use the callback. For example:

var _this = this; // because this will point to a different object inside the callback
$(this).siblings().slideToggle('slow', function() {
   $(_this).parent().toggleClass('expanded');
});

Or something like that. It’s not immediately obvious what final outcome you are seeking. But hopefully this will help you on your way.