ansaurus

Question

Traversing the DOM using jQuery

Answer 1

+1 A:

One good place to look is in the Visual jQuery Docs under selectors: http://screencasts.visualjquery.com/

I think you're trying to do something like

$(this).parent().next('.hidden');

inside your onClick function?

Hope that helps!

WillCodeForCoffee 2008-11-06 18:06:52

that is a good reference site, thanks

CarolinaJay65 2008-11-15 14:47:00

Answer 2

A:

You have several options:

$('.expand').click(function () {
  $(".record").toggle();
});

or

$('.expand').click(function () {
  $(".record").slideToggle("slow");
});

Though if you're going to be targeting the next div based on it's relevance to the clicked img, then you'll need to target it with .parent('span').parent('div').next('record')

Steve Perks 2008-11-06 18:10:03

I think he needs to apply the toggling to the next record not all of them.

Allain Lalonde 2008-11-06 18:12:24

Answer 3

+3 A:

A cleaner approach is to toggle the image's parent's class between collapsed and expanded then in your css you can use contextual selectors to hide nested divs within collapsed ones.

Just my 2 cents.

Allain Lalonde 2008-11-06 18:11:50

took some thought and a subsequent answer's confirmation to get what you were referring to....I agree and I will explore this type of solution...thanks for the post

CarolinaJay65 2008-11-06 18:41:23

Answer 4

+1 A:

Here's a working example:

<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>

<div>
  <span class="expand"><img src="x.jpg"></span>
  <span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>

<script type="text/javascript">
    $(document).ready(function(){
     $('.expand img').toggle(
     function(){
      $(this).parent().parent().next().hide();
     },
     function(){
      $(this).parent().parent().next().show();
     });
    });
</script>

Note that I'm using parent twice because the event is added to the image, whose parent is the span, whose parent is the div.

Adam Tuttle 2008-11-06 18:14:27

Answer 5

+1 A:

Allain is correct, it is better to operate only on the parent, then use CSS selectors to show or hide the children, flip +/- images, etc. But anyway, here is functional code that does what you want in the way you were wondering:

<html>

<head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
    $( document ).ready( function() {
        $( '.expand img' ).click(
            function() {
                $(this).parents( 'div' ).eq( 0 ).siblings( '.record' ).eq( 0 ).toggleClass( 'hidden' );
            }
        );
    } );
  </script>

  <style type="text/css">
    .hidden {
        display: none;
    }
  </style>

</head>

<body>

  <div>
    <span class="expand"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;&lt;/span&gt;
    <span>Subject Heading</span>
  </div>
  <div class="other">Don't care about this</div>
  <div class="record hidden">Display or Hide this text</div>

</body>

</html>

Pistos 2008-11-06 18:17:08

Answer 6

A:

This is what I am using currently, thanks Adam...but I will explore Allain's suggestion as well.

$(function(){
$('.expand img').toggle(
 function(){
  $(this).parent().parent().next().show();
  $(this).attr('src', 'images/minus.gif') ;
 },
 function(){
  $(this).parent().parent().next().hide();
  $(this).attr('src', 'images/plus.gif') ;
 });
});

CarolinaJay65 2008-11-06 18:43:10

fwiw, I up-voted Allain's suggestion because it sounds good. I think he should provide a code example, though.

Adam Tuttle 2008-11-06 19:08:23

The trouble with this solution is that you are stuck with exactly the nesting depth and sibling relationship you have in your example. If you ever nest deeper (great grandparent div?), or add or reorder siblings (see my example), your code must be adjusted.

Pistos 2008-11-06 19:44:09

My solution works regardless of sibling order, or ancestor distance.

Pistos 2008-11-06 19:44:46

the real trouble is that I didn't do a good job of asking my question. this solution will always suit my needs for my current project. I will (and have) returned to these answers to learn further concepts. I did upvote Pistos' answer and will review it in the future. thanks for all the answers

CarolinaJay65 2008-11-06 22:46:44

ansaurus

tags:

views:

answers:

Traversing the DOM using jQuery

related questions