CODEWITHSUNDEEP
jquerycssslidetoggle
user1676691
user1676691

Reputation: 217

How to make jQuery slide open and close with CSS class

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.

Upvotes: 0

Views: 773

Answers (2)

elydelacruz
elydelacruz

Reputation: 155

For background issue:

Try adding the box type css property to the containers you wish to keep their background colors; 

// I.e.,
box-sizing: border-box
// @see https://developer.mozilla.org/en-US/docs/CSS/box-sizing

And if that doesn't work try floating the element and clearing its float from within:

<div style="float: left; position: relative; width: 320px; height: 240px; margin: 10px; background: #ff0000;">
  <p>Content</p>
  <br style="clear: both;" />
</div>

The float will enforce the width and background color regardless of anything else.

And as for your action close before next action open: Take a look at script at the following link. It's a script that I wrote several years back but it has the basic framework idea for what you want to do:

http://abi.edu/js/resources-page.js

The toggle info item hides all info items and shows the one with the id passed; I.e., for each link click hide all show one clicked.

Also another cleaner example from about a year ago: http://abitribeca.com/index/about

Click links on left hand column to see content area change.

Also remember these are simple examples you could also do something more complex like:

http://elycruz.com/portfolio

@note this last example is a bit messy as I was learning on how to handle json from a php backend (good example though).

Upvotes: 0

patrickmcgraw
patrickmcgraw

Reputation: 2495

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.

Upvotes: 1

Related Questions