I’m trying to get a scenario working to where I can fade a div

Question

0

Asked: June 14, 20262026-06-14T04:18:33+00:00 2026-06-14T04:18:33+00:00

I’m trying to get a scenario working to where I can fade a div

0

I’m trying to get a scenario working to where I can fade a div in and out, replacing it with a another div. This part I’ve got working, but my DIV completely disappears if the DIV I fade into has DIV’s within it.

Example:

<center>
        <ul id="menu">
            <li><a href="#content1">Home</a>&nbsp;&nbsp;|</li>
            <li><a href="#content2">Work</a>&nbsp;&nbsp;|</li>
            <li><a href="#content3">Blog</a>&nbsp;&nbsp;|</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>

This works, If the contents of DIV “content1” look like this it’ll perfectly fade in and out.
But, since I want to style the contents of “content1” and “content2” etc, I’ve placed DIVs inside like so.

<div id="contentWrap">
   <div id="content1">
         <div id="homeContent">
         Home, content should go here :(
         </div>

     </div>

This makes it so when I click on the link to fade this particular DIV in turn it completely white with no content. I cannot figure out why it will not render the content.

I’m using this for my jQuery script

$(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;
    }
});

});

Here’s a jsFiddle, the Home menu item is the one which has the problem. The other ones work fine as you can tell.

http://jsfiddle.net/uyAzp/