Geek Answers Handbook

JQuery hide () div until fully loaded

I use a special tab entry for my blog. How to implement div#latest-featured will hide() and then show() back after the content is fully loaded?

 $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); });

HTML

 <ul class="tabs"> <li><a href="#f1">Title 1</a></li> <li><a href="#f2">Title 2</a></li> </ul> <div id="latest-featured"> <div id="f1" class="tab_content"> <p>Content for title 1</p> <p>Why I want to hide the #latest-featured because.. when had image @ script here.. the tab_content will collapse all and break my design</p> </div> <div id="f2" class="tab_content"> <p>Content for title 1</p> <p>Why I want to hide the #latest-featured because.. when had image @ script here.. the tab_content will collapse all and break my design</p> </div> </div>

Example: I have a div with id #latest-featured , and I want to hide it until the content is fully loaded, and then display it after loading.

How to implement the current code above.

+4
source share
4 answers

Probably the best thing to do is something like this:

 <div id="latest-features" style="display:none;"></div> $(function() { // do work $("div#latest-featured").show(); }

It is usually not recommended to hide something by default, but it will meet your requirements.

+12
source

If you want it to display after loading, declare CSS display: none for that div, and then call $('div#latest-featured').show(); in its function $ (document) .ready.

+2
source

Why not just set the div to display: none until you load the data and then remove the display: none ... there are many ways to do what I just mentioned btw (e.g. jQuery.toggle (true) )

0
source

If you want it to display after loading, declare the CSS: none display for that div, and then call $('div#latest-featured').show(); in your function $(document).ready .

Robert replied that I would vote for him best, but I couldn’t ... I was looking for this solution for hours, and that was the best I found ...

0
source

More articles:


All Articles