Hide inline div using CSS

Question

I have an inline div which I need to make hidden by default and then use jQuery's show() and hide() functions on it.

I tried this, but it doesn't work:

div.mydiv { display: inline none; }

If I remove none and just use jQuery's hide() function, it works. But this way the elements are not hidden until the page is loaded and JavaScript code is executed.

Edit I have other block elements inside the div, so I can't use span.

Answer 1

CSS:

.mydiv { display: inline; }
.hidden{ display: none; }

HTML:

<div class="mydiv hidden"></div>

JS:

$(function(){
  $('.myDiv').removeClass('hidden');
  // do your business here
});