jQuery - Hide Element

Hightower · 08-17-2009, 01:52 PM

I have the following HTML elements in my page - about 3 to 5 of them depending on each page.

html4strict Code:

<!-- Provides the image for the top of the box -->
<div class="boxtop"></div>

<!-- Provides the rest of the box -->
<div class="box">
    <h1>Test</h1>

    <!-- Provides the place to put content/this can be hidden using jQuery-->
    <div class="boxcontent">
        <p>This is some test content</p>
    </div>
</div>

What I want to a achieve is when the boxtop element is clicked, the boxcontent element is hidden/unhidden.

This is the code I have so far for jQuery: As you can see, the boxtop background image is changed, and this works nicely (goes to a plus/minus depending on toggle status.

javascript Code:

$(document).ready(function() {    
    $(".boxtop").toggle(
        function () {
            $(this).css("background-image","url(images/boxtop_open.gif)");
        }, function() {
            $(this).css("background-image","url(images/boxtop_close.gif)");
        });
    });

What code might I use within the toggle function that would hide the boxcontent element upon click of the boxtop element?

I've looked through documentation and can't find what it is I need. I would list what I've tried but it really is too extensive (I can't even remember them all!), so I thought I'd ask the experts who could probably help me in 30 seconds flat.

Thanks!