Wikipedia project - Slide down div results after they have been generated

Right now my results div just pops up when the search was successful. I’m trying to make it so that it slides down after the dynamic content in that div has been generated. I’m using $('#searchResults').slideDown('slow'); but this isn’t working because if I put it at the top of my code it would slide an empty div down. If I put it at the bottom the content has already been generated and has popped up on screen. How could I solve this?

Hi there. While using methods like fadeIn() or slideIn(), you first need to set the display property of that element as

display: none;

Else, I do not think it’ll work right. Try changing that and see if it’s any better.

2 Likes

This is definitely on the right track, but I’m still having some issues. I’ve created a new css class for the search results with display:none; and have also created jquery to remove this class after my code has run (& the div contents generated). $("#searchResults").removeClass("searchDisplay")

So far so good. But next what happens is my search results appear without the desired animation squished into only the first column, not looking so good. How could I correct this?

That seems to be because of a wrong bootstrap grid class. Line number 25 in your HTML code. Meant to be an offset class eh…?

2 Likes

good catch, thank you so much. That’s cleared up everything!

1 Like