Hello, I have a strange problem with jQuery which I'm not able to solve. I have several nested divs, each containing <a> tag which opens/closes nested div. There are <img> next to <a> which I want to change when <a> is clicked. Divs are opening/closing fine, but not only the one but even another images are replaced. <a> has id="x", <img> has id="x-img" and <div> has id="x-pane".
You can see it online at http://3rd-tr.y-co.de/test-jquery.html, using jQuery 1.2.6.pack. When you click on section names you'll see animated icons changing - but not only the one next to section name, also some others. When there are no images available and only 'alt' attribute is displayed, everything is OK and alt changes on the right <img> only. When I add debug alert to see which object and elements are going to change, I see correct ids and names. But images change ... maybe somewhere deep in jQuery far from my script. I'm not sure if I'm doing something wrong or if it's a bug in jQuery. I tested it in FF 3 and IE 7. This is my code <script> $(document).ready(function(){ $('a.toggle').click(function(event) { // replace image with the id '(<a>id)-img' if($('#' + this.id + '-icon').attr('alt') == 'v') $('#' + this.id + '-icon').attr({'src' : '/images/icon-section- closing.gif', 'alt' : '>'}); else $('#' + this.id + '-icon').attr({'src' : '/images/icon-section- opening.gif', 'alt' : 'v'}); // close/open pane with the id (<a>id)-pane $('#' + this.id + '-pane').slideToggle('fast'); // discard the event event.preventDefault(); }); }); </script> <div class="section"><strong><a href="#" class="toggle" id="sec1">Section 1</a><img id="sec1-icon" src="/images/icon-section- open.gif" alt="v"></strong> <div id="sec1-pane" class="block"> <div class="section"><strong><a href="#" class="toggle" id="sec2">Section 1-1</a><img id="sec2-icon" src="/images/icon-section- open.gif" alt="v"></strong> <div id="sec2-pane" class="block"> <a href="file.pdf" alt="">1st file to download</a> </div> </div> <div class="section"><strong><a href="#" class="toggle" id="sec3">Section 1-2</a><img id="sec3-icon" src="/images/icon-section- open.gif" alt="v"></strong> <div id="sec3-pane" class="block"> <a href="file.pdf" alt="">2nd file to download</a> </div> </div> </div> </div> <div class="section"><strong><a href="#" class="toggle" id="sec4">Section 2</a><img id="sec4-icon" src="/images/icon-section- open.gif" alt="v"></strong> <div id="sec4-pane" class="block"> <div class="section"><strong><a href="#" class="toggle" id="sec5">Section 2-1</a><img id="sec5-icon" src="/images/icon-section- open.gif" alt="v"></strong> <div id="sec5-pane" class="block"> <a href="file.pdf" alt="">3rd file to download</a> </div> </div> <div class="section"><strong><a href="#" class="toggle" id="sec6">Section 2-2</a><img id="sec6-icon" src="/images/icon-section- open.gif" alt="v"></strong> <div id="sec6-pane" class="block"> <a href="file.pdf" alt="">4th file to download</a> </div> </div> </div> </div>
