SlideUp Function on Jquery

Question

i have a slide up function and a slide down on my script, everything works. The problem is that the DIVs are collapse and not hidden how would i be able to hide the divs on page start up. i tried to set the DIV to hidden but no luck with that.

Answer 1

Suppose you have these divs:

<div id="div_id">Some Content</div>
<div id="div_id2">Some More Content</div>

Here is how you can hide them initially on:

With CSS:

div#div_id
{
   display:none;
}

div#div_id2
{
   display:none;
}

/* and so on */

Or With jQuery:

$(function(){
  $('div#div_id').hide();
  $('div#div_id2').hide();
  // and so on
});

Answer 2

At "start up" the DIVs should already be hidden via inline styles:

<div style="display:none">...<.div>

Answer 3

As already mentioned you should hide your element before it can be slided up.

But it is a bad practice to hide divs in CSS, it is much better to use JavaScript to hide them on-load, it is because many users block JavaScript when they are browsing the web.

If you hide your divs inside CSS, the users with blocked JavaScript won't be able to see your content at all, but they will be able to see everything if you hide elements with JavaScript on-load.