Hiding Div with JQuery

[andrewsmd]

So I have a div that slides out on a click of a button. The issue I'm having is that when the page initially loads, I try to hide it, but you can see it for a brief second before hand. Does anyone have any ideas on how I can get this hidden from the get go, so you don't see it ever, until you click the button to slide it out. I can't do anything server side only client side because this is in a pre built CMS. Here is the CSS HTML and JS I'm using

This is the div I hide
<div class="inner" id="myDiv">...html here...</div>

Here is it's css
.inner{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 411px;
background-image: url('images/supportBg.jpg');
background-repeat: repeat-x;

}

Here is the image you click to show it.
<img src="/Portals/_default/Skins/home/images/support.jpg" onclick="toggleDiv()">

and here is the js that hides the div and also that shows it

<script type="text/javascript">



$(document).ready(function () {

$("#myDiv").hide();

$('#slidebottom a').click(function () {

$(this).prev().slideToggle(1200);

});

});

function toggleDiv() {

$("#myDiv").slideToggle(1200);



} //toggleDiv

</script>

[Fotiman]

Is this a continuation of this thread:
[webmasterworld.com...]

If so, did you try my suggestion of applying a class of "no-js"?

[andrewsmd]

Sorry I forgot I had posted that. I'll try and see what I come up with.

[JAB Creations]

Don't use jQuery, not cross-browser compatible, at 70KB it's bloated and you shouldn't add tons of bandwidth and extra processing to change a simple class...

function change(id, newClass)
{
 if (document.getElementById(id)) {document.getElementById(id).className=newClass;}
 else if (id) {id.className=newClass;}
 else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);
 }
}

// usage
//change('my_elements_id_here','new_class1 new_class2');

- John

[andrewsmd]

Simply changing the class is not what I want to do. I need the affects of it sliding.