0

I seem to be missing something here, so if someone could explain to me the process that is going on under the hood, I'd much appreciate it.

What I'm trying to accomplish is to get the .slideDown() effect that jQuery offers after removing the CSS on the element that hid the contents of that particular element.

I've created a fiddle to explain/show more of what I'm trying to do:

http://jsfiddle.net/iOnline247/4Ztpg/

Again, I'd like to know about the innards of what and why what I'm doing isn't working. I'm sure it has something to do with the size of my brain, but let's be nice...

Edit------ The inline styling is how the HTML is rendered from the server. I have no control over that whatsoever unfortunately.

2
  • 2
    Why do you have display: inline in your HTML and display: none !important in your CSS?
    – gen_Eric
    Commented Oct 18, 2012 at 19:05
  • Sorry for not explaining that in the post. The HTML is rendered from a control (.net aspx) and I can't change that.
    – iOnline247
    Commented Oct 18, 2012 at 19:40

3 Answers 3

2

.slideDown() will take an element that isn't visible and make it visible with an animation. If you first remove the style that is making it not visible, then it will appear immediately. Once it is visible .slideDown() will do nothing.

So the question is, why are you removing the style in the first place? And why do you have an inline style set?

If you need to override the inline style (and for some reason, can't just remove it from the source HTML), then you can do this when your document loads:

$(function() {
    $(".some-text").css("display","none");
});

Now your slide down will work and you don't need to remove any classes. When you set a style with .css it will override any inline styles.

Edit: Here's a fiddle to demonstrate:

http://jsfiddle.net/VjWEs/1/

Note I wrapped your div in another div so you can see that it's actually displaying as block when it appears. If you change the .css("display","none"); to .hide() you will preserve the inline display, but then it can't slide down anymore, it'll just appear.

4
  • The inline styling comes from the server. I can't control it unfortunately. I'm stuck with it and have to come up with a way to get around it. Whatever the answer is, it'll have to handle the inline styling somehow....
    – iOnline247
    Commented Oct 18, 2012 at 19:47
  • @iOnline247: Well then, as I suggested in my answer, just strip it out after it loads. .css will set inline styles overriding the existing display setting. Or, if you prefer, just use .hide when it loads to hide it which lets it remember that it was inline when it reappears (if that's what you wanted). Commented Oct 18, 2012 at 19:50
  • 1
    @iOnline247: Actually, scratch my comment about using .hide. If you keep the style as inline, then you can't do slideDown anyway. It will just make it appear immediately with no animation. You have to remove the inline display style as I showed in my answer or wrap the thing in another div for this to work. Commented Oct 18, 2012 at 20:15
  • Thanks for hooking me up with a good answer. Much appreciated!
    – iOnline247
    Commented Oct 18, 2012 at 20:29
1

You should keep all CSS in your CSS file, and not use any inline styles, also you should never need to use !important in your CSS.

That being said, you don't need to remove the no-display class before sliding down. slideDown will add display:block to your element after sliding it down (you can remove the class in the callback if you want).

5
  • Yeah, but the problem is that slideDown won't override the !important in their CSS. But as you say, what they need to do is just remove the inline styles. Commented Oct 18, 2012 at 19:14
  • @MattBurland: And the !important :-P
    – gen_Eric
    Commented Oct 18, 2012 at 19:15
  • Check out my update about the use of the inline styling. Totally not my fault and the solution has to have the inline styling in there unfortunately.
    – iOnline247
    Commented Oct 18, 2012 at 19:45
  • @iOnline247: Does the inline styling have to remain there after the div appears? As I noted below, if that's the case then you can't use .slideDown. Commented Oct 18, 2012 at 20:22
  • @MattBurland The inline styling does not have to stay there, so your answer will work great.
    – iOnline247
    Commented Oct 18, 2012 at 20:30
0

There are already good answers to this question but I made a Fiddle anyway. Hope it helps. I changed the your demo so you didnt have to use inline styles. Read more on this here .

//jQuery
$('#clickme').click(function() {
  $('.some-text').slideDown('slow', function() {
     //slide done, can do more stuff here if u need to
  });
});


<!-- HTML -->
<h3 id="clickme">More Info</h3>
<div class='some-text'>The div to slide</div>


/*CSS*/
.some-text { height: 20px; display: none; }
2
  • You don't need to specify the height of the element you are sliding (unless you want it to be different that it would normally be). It should size itself just like a normal element. Commented Oct 18, 2012 at 19:48
  • I removed that bit from my answer. Thanks for the heads up. Commented Oct 18, 2012 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.