Question

Upon a click on an IMG, I would like to get to the next subsequent DIV so that the DIVs content can either be displayed or hidden depending on its current display state.

This is an HTML snippet:

<div>   <span class='expand'><img src='images/plus.gif'></span>   <span>Subject Heading</span> </div> <div class='record hidden'>Display or Hide this text</div> 

I have some code (provided in another answer on this site) for doing this in a table. Would I set an event listener for the img or the containing span? not sure how to use parent(), next(), sibling() functions to get around….

Also, how do you test if your navigation is getting to the right element? can you use an alert to display the id or value?

Any help is appreciated Thanks

Answer 1

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.