JQuery Show/Hide Help

Greenster · 01-25-2010, 08:36 PM

Really Need Help Please.
I'm a newbie when it comes to jQuery.

But, I'm lost trying to implement this Hide/Show in a new design.
example http://youthofsuburbia.com/showhidetest.php

For some reason only the first divwrap is being effected (hiding the child div)
And "Show" (tagged with H3) is not making the hidden div visible. It's not even clickable.

Details. There is a smaller Div below the larger dive (the one with all the lorem) that is suppose to be hidden until the word "Show" is clicked. The first Small Div is hidden below the first larger div, but the second Small Div is still visible.

I'm trying to Show/Hide Divs (multiple), but do not want all of them to be shown or hidden when one button is clicked, they should be shown individually. There is a main Div (PostWrap) with 2 main Child Divs. One Dive should always remain visible while the other should be hidden on load, and affected by the show/hide (div with class "comments".)

the HideShow file is located here http://youthofsuburbia.com/javascript/more-show-hide.js
I made some changes to it. Hope that's not whats breaking it. But I assume since one div is being hidden on load then its working some what, just not sure where the bugs are coming from.

The Code I'm using is from http://www.learningjquery.com/2007/0...ng-more-hiding

Thank you for any help.
If I confused anyone as to what I am trying to do. I tried to explain the best I could

harbingerOTV · 01-25-2010, 09:23 PM

Try:

Code:

$(document).ready(function() {
  $('div.postwrap div.comments').hide();  
  $('div.postwrap h3').click(function() {    
        $(this).parents('div.postwrap').children('div.comments').slideToggle('fast');
  });
});

This part of your code:

Code:

$('div.postwrap:eq(0) > div.comments').hide();

is looking specifically for a 'div.comments' that is a direct descendant of a 'div.postwrap' that is alos the first one on thepage. the 'eq(0)' does that. This is not what you want for the code you are using.

This:

Code:

$('div.postwrap div.comments').hide();

will target every 'div.comments' inside a 'div.postwrap'. Better in this case.

In a similar case, this:

Code:

  $('div.postwrap:eq(0) > h3').click(function() {
    $(this).next().slideToggle('fast');
  });

Is looking for any 'h3' that is a direct descendant of the first 'div.postwrap' on the page.

Now this might be a little hard to wrap your head around at first but the 'fix' is all based on the same principle. It's all about the order they come in in the HTML so,

Code:

$('div.postwrap h3').click(function(){                                                                                                                    
$(this).parents('div.postwrap').children('div.comments').slideToggle('fast');
});

It looks for a 'h3' inside a 'div.postwrap' that has just been clicked. Then it looks for that specific 'h3's parent element that happens to be a 'div.postwrap'. Then it searches that element for it's child element of 'div.comments'. It finds it and it applies the toggle.

So the 'eq(0)' is looks ofr an element in that position, starting at 0. ie html like:

Code:

<div class"apple"></div>
<div class"apple"></div>
<div class"apple"></div>
<div class"apple"></div>

and jQuery of:

Code:

$('div.apple:eq(2)')...

will select the 3rd div in the above code.

the operator of ">" is looking for the next direct matching descendant. In your HTML the stucture is this:

Your HTML structure has a lot of nesting in it so jQuery is not going to find it as it doesn't actually exist in that state.

Make since?

http://api.jquery.com/category/traversing/

Greenster · 01-26-2010, 12:18 AM

Harbinger,
Thank you for your reply. It helped greatly.
Yes it did take a min to wrap my head around, but I finally got things working by following your examples.

Thank you again