hi all,
I'm new to the list and new to jQuery, so I hope you can bear with me.
I'm having a problem getting a specific div to hide without hiding
similarly classed divs. The HTML looks something like this:
<div class="device_header">
<h2>Device Name</h2>
<ul>
<li><span class="collapse_device_span"><a class="collapse_device">-</
a></span> </li>
</ul>
</div>
<div class="device_content">
---Device Information---
</div>
The jQuery I'd like to use looks like this:
$('.collapse_device').click(function(){
$(this).next('.device_content').hide() });
If I write it as:
$('.collapse_device').click(function(){
$('.device_content').hide() });
That works, but closes all the ".device_content" classes on the page
and there could be, depending on the view, anywhere from 1-20 or
more .device_content classes on the page.
So, what am I doing wrong with (this).next and/or is there a better
way to do what I'm trying to do? I've read around in the forums here
and tried different methods but none seem to get at this exact
problem. I've deduced that it may be to do with next requiring
siblings--but I can't find clear documentation on just how strictly
jQuery interprets the word "sibling"--if strictly, e.g. anchors are
only siblings of anchors, then I can see the problem in that an anchor
can't recognize the .device_content div as its sibling. But then I
wonder if I'm thinking too hard about it?
Thanks in advance,
jody
