TalkPHP - jQuery - Hide Element

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - jQuery - Hide Element (http://www.talkphp.com/javascript-ajax-e4x/4863-jquery-hide-element.html)

jQuery - Hide Element

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!

$('#boxcontent').slideUp('fast'); // toggle hide
$('#boxcontent').slideDown('fast'); // toggle show

OR
$('#boxcontent').fadeIn('fast'); // toggle show
$('#boxcontent').fadeOut('fast'); // toggle hide

Tried those - none of them work.

Also tried $('.boxcontent')

Sorry you are right, it is a class not an id, so what you tried should have worked.

yeah, but it doesn't :-S

Any ideas anybody? I can post the full code zipped up if anybody thinks that would make things easier?

yeah do that and I can definitely look at it early tomorrow morning.

Attached - apologies for any messy code, but I haven't started to tidy it up yet as still working on template.

I'm sure you'll find your way around it :-)

In Chrome (3.0.197.11) when I click on any arrow that isn't the first nothing works, if I click the first one they all expand, also the "show all" doesn't change when they change.

I wish I could click the text of each box and expand the box that way.

Its easiyer if the boxtop is nested inside the container, then yo can use the prev sibling selector to select the parent node (container), then select box.

This seems to work ( a little bit of fudging with the styles)

Ah you all beat me to it. :)

Quote:

Originally Posted by adamdecaf (Post 27846)

In Chrome (3.0.197.11) when I click on any arrow that isn't the first nothing works,

I wish I could click the text of each box and expand the box that way.

That's what I'm trying to achieve.

Downloaded the zip - thanks. Trying now.

That's absolutely spot on!

When I click hide all however, they are all hidden. But to then show one box only I have to click the plus arrow twice :-S

try this, instead of toggle:

javascript Code:

$('div.boxtop').click(function(){
        c = $('~div.boxcontent', this);
        if($(c).css('display') !== 'block'){
            $(this).css("background-image","url(images/boxtop_close.gif)");
            $(c).slideDown('fast');
        }else{
            $(this).css("background-image","url(images/boxtop_open.gif)");
            $(c).slideUp('fast');
        }
    });

The problem with the toggle switch is that it only does one thing then the other however if you need it to be more intelligent (i.e. figure out what state it currently has, and do handle the event accordingly) its alot easier just to use a single click event and conditionally handle it.