jQuery toggle function only working once

I'm pretty new to jQuery, and seem to be stuck on 1 part of my code which i just cant seem to figure out.

Im using link, so that once clicked will toggle a div visible and its child elements within, and then when clicked again will toggle the div and its child elements invisible.

Now the main parent div seems to be working fine. The div begins hidden, then becomes visible, then hidden, then visible etc etc as many times as I press the link. But the child element within will only become visible once, then once it is hidden will not become visible again until the page is reloaded.

Below is my code and any help would be greatly appreciated.

$( toggle );

    function toggle() {

        $('#blog-na开发者_如何学JAVAv').click(function() {
            $('#blog-bg').toggle();
            $('#blog-content').toggle();    
        });

    }

And here is my html code:

        <div id="blog-bg">
            <div id="blog-content">
                This div doesnt seem to be working
            </div>
        </div>

And here is my relevant css which just sets their initial state to hidden:

#blog-bg {
    display:none;
}

#blog-content {
    display:none;
}

Also, I know that theres a .children() function that can be used, but had trouble getting it to work, so found a work around.

Here's a link to the page i'm trying to get it to work on if this is any help jordanpaulmilligan.com