Question

I have a custom accordion menu with [+] link next to each expandable UL (toggle_action) to expand its child (div_toggle). For the active

(the page being viewed) I’m trying to traverse up the DOM and change any plus.gif images into minus.gif next to its parent

s since they are already expanded. I’ve searched for most of the day and going crazy. Below is my latest attempt that I thought was surely going to work. I don’t get any errors – it just doesn’t work.

Here’s my HTML:

    <ul class="topnav">
      <li><h3 class="toggle_action"><img class="img-swap" src="/images/plus.gif"/>Governance</h3>
        <ul class="div_toggle">
          <li><h3><img src="/images/spacer.gif"/><a href="/governance">Governance</a></h3></li>
          <li><h3 class="toggle_action"><img class="img-swap" src="/images/plus.gif"/>Board of Directors</h3>
            <ul class="div_toggle">
              <li><h3><img src="/images/spacer.gif"/><a href="/governance/bod" class="active">Board of Directors</a></h3></li>    
              <li><h3><img src="/images/spacer.gif"/><a href="/governance/bod/min">Minutes</a></h3></li>
            </ul>
          </li>
          <li><img src="/images/spacer.gif"/><a href="/governance/com">Committees</a></h3></li>
        </ul>
      </li>
      <li><h3 class="toggle_action"><img class="img-swap" src="/images/plus.gif"/>About</h3>      
        <ul class="div_toggle">
          <li><h3><img src="/images/spacer.gif"/><a href="/about">About Us</a></h3></li>
          <li><h3><img src="/images/spacer.gif"/><a href="/about/contact">Contact</a></h3></li>
        </ul>
      </li>
   </ul>

and the jQuery:

$('.topnav a.active').parents().attr('src').replace('plus.gif','minus.gif');

What am I doing wrong?? Thanks in advance!

Answer 1

The way you have your html nested, it will never grab the <img> tag because it is not considered a parent of the active class <img> tag.

You should consider changing the way your HTML is being outputted most definitely.

But here’s a solution to your problem in the current way that you html is being nested.

$(".active").parents(".div_toggle").prev("h3:first").children(":first").addClass("plus");

$('h3.toggle_action img').each(function(){
    if ($(this).attr('src') && $(this).hasClass('plus') && $(this).attr('src').indexOf('plus.gif') > 0)
    {
        var imgSrc = $(this).attr('src').replace('plus.gif','minus.gif');
        $(this).attr('src', imgSrc);
    }
});

Ok, what this does, is that it grabs the "active" parents <h3> child <img> and adds a class to it called "plus" and uses this class when looping through the <h3 class="toggle_action"><img> tags, making sure to grab the img tag with plus as a class, and changes the other ones to the minus.gif image.

Hope this helps you. If so, mark it as your answer.