2

I want to hide an specific div class while page is loading. The structure is..

<div id ="container">
<div class="project-item tv"></div>
<div class="project-item radio"></div>
<div class="project-item radio"></div>
<div class="project-item tv"></div>
</div>

For example, I want to hide DIV with class radio while page is loading, then show them again after load. Thanks.

markyeoj
  • 359
  • 2
  • 6
  • 17
  • What I would try to do is make it so the div has the class "hidden" (which you can css to be display: none;) and then have some kind of function in the js remove the class after page load. – QuestionMarcs Nov 13 '13 at 04:02

4 Answers4

10

First, set it's CSS value to display:none

Then, in a Javascript file, the jQuery solution would be to use:

$(document).ready(function() {
     $("#yourdivid").show();
});

$(document).ready() makes sure that the entire DOM is loaded before the code inside the function is executed

user2415992
  • 481
  • 7
  • 22
2

Use CSS

hide div using css

div.radio {
    display:none;
}

js

Show div with class radio on DOM ready

$(document).ready(function () {
    $('div.radio').show();
});

Show div with class radio on load 
$(window).load(function () {
    $('div.radio').show();
});

Read What is the difference between $(window).load and $(document).ready?

Community
  • 1
  • 1
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
0
<style>
 div .radio  {display:none;}
</style>

<div id ="container">
<div class="project-item tv"></div>
<div class="project-item radio"></div>
<div class="project-item radio"></div>
<div class="project-item tv"></div>
</div>

in JS

$().ready(function() {$("div .radio").css("display":"block")});
Nuwan Dammika
  • 587
  • 9
  • 20
0

CSS:

.hidden { display: none; }

HTML:

<div id="blah" class="hidden"><!-- content --></div>

JQUERY:

$(function () {
     $('#blah').removeClass('hidden');
 });
Harvinder Kheng
  • 44
  • 3