Question

I have this code : http://jsfiddle.net/Qchmqs/BSKrG/

<div class="step"><-- this is darned wrong
    <div id="step2"><a>Darn</a></div>
    <div id="step2"><a>Darn</a></div>
    <div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
    <div id="step2"><a>Darn</a>
    <a>Darn</a>
    <a>Darn</a></div>
</div>

The first block is three links inside three separate divs inside a surrounding div

The bottom block has the links inside one parent div

I am trying to change the background of an active link, but it won’t turn off in the upper block.

The script works well with the bottom links but not working as expected with the upper ones

PS : The active class should be toggled only from the Links i have a lot of other scripts in the page that uses the .active links from this list.

Answer 1

For starters, do what JamesJohnson said and remove the multiple IDs. They can only cause you problems down the road.

In the upper links, the a tags aren’t siblings because you put each one in its own div. So you need to do this to remove classes from the other as:

$(this).parent().siblings('div').children('a').removeClass('active');

http://jsfiddle.net/mblase75/BSKrG/1/

Unfortunately, that breaks the functionality on the lower links. You can achieve success in both places by adding andSelf to the parent siblings:

$(this).parent().siblings('div').andSelf().children('a').removeClass('active');

http://jsfiddle.net/mblase75/BSKrG/2/