Currently, I am working on creating a scenario that involves fading in and out a div while replacing it with another one. Although I have successfully achieved this functionality, I encountered an issue where the div completely disappears if the new div contains other nested div elements.
For instance:
<center>
<ul id="menu">
<li><a href="#content1">Home</a> |</li>
<li><a href="#content2">Work</a> |</li>
<li><a href="#content3">Blog</a> |</li>
<li><a href="#content4">Contact</a></li>
</ul>
</center>
<hr class="style-main">
<center><img src="{image:homeHeaderImage}"></center>
</div>
<div id="contentWrap">
<div id="content1">
Home, content should go here :)
</div>
The above code snippet works as expected when the contents of DIV "content1" are simple text. However, when I attempt to style the contents by nesting DIVs inside like below, the resulting behavior is that the entire area becomes white without any visible content.
<div id="contentWrap">
<div id="content1">
<div id="homeContent">
Home, content should go here :(
</div>
</div>
Clicking on the link to fade in this specific DIV results in it rendering blank, which leaves me perplexed as to why the content does not display.
The jQuery script I am using:
$(function() {
$('#contentWrap div').hide();
$('#contentWrap div:first').show();
$('#thumbs a:first').addClass('active');
$('#thumbs a').click(function() {
if ($(this).hasClass('active') == true) {
return false;
}
else {
$('a.active').removeClass('active');
$(this).addClass('active');
$('#contentWrap div').fadeOut();
var contentToLoad = $(this).attr('href');
$(contentToLoad).fadeIn();
return false;
}
});
Link to jsFiddle exhibiting the issue with the "Home" menu item: