Question

I have a simple blog page – a list of posts that each consist of a title and contents. When the page loads I want all posts’ contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect – the on-page-load hide() function that hides each post’s content also hides the background of the containing (id=”content”) div:

Relevant JavaScripts:

$(document).ready(function() {

    $(".blog_post p").hide();

    //BLOG CONTENT ANIMATION
    $('.blog_post').click(function() {
        $(this).find('p').slideToggle(130);
    });      
});

Summary of blog page:

<section class="grid_7">
<div id="content">

    <div class="blog_post">

        <div class="blog_head">
            <h2>Title</h2>
        </div>

        <p>Contents</p>

    </div>

</div>
</section>

Relevant CSS:

section { 
    border: 1px solid white;
}

#content {
    margin: 20px;
    background-image:url('../images/content_background.jpg');
}

When the page loads the list of titles displays without the #content parent div’s background. However when I click on a post’s title the #content div’s background shows up behind all posts up to and including that one.

Any idea what’s going on?

Answer 1

It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:

.blog_post { float: left; }

In that case, the reason that the background doesn’t show up is that the height of the content div is zero. A floating element doesn’t affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it’s visible.

Add an overflow to the content div, that will make it contain its children:

#content { overflow: hidden; }

Note that this will not hide anything as long as you don’t specify a size for the content element, it will just change how it’s rendered so that it will become a container for its children.