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!