Question

I have a jQuery script that is working well for the most part. I have a list of links that I click on to show/hide specific DIV elements. When I click on a link it’s CSS altered (color of link changes to red).

HTML

<ul style="list-style: none;">
    <li><a href="#" class="review-link" name="review-1">Click to see Review 1</a></li>
    <li><a href="#" class="review-link" name="review-2">Click to see Review 2</a></li>
    <li><a href="#" class="review-link" name="review-3">Click to see Review 3</a></li>
</ul>

jQuery

$(".review-link").click(function () {
  var divname = this.name;
  $("#"+divname).show("slow").siblings().hide("slow");
  $(this).css("color","red");
  $(this).siblings().css("color","green")
});

What I am having trouble doing is having all the other links reset to their original color. In my example I am trying to turn all the other links to the color green but I cannot even get that to work. Perhaps I am not understanding the “sibling” property in jQuery?

Here is a jsFiddle example.

Answer 1

The .review-link elements have no siblings. You want its parent element’s siblings.

You could use something like this instead…

$(this).parent().siblings().find("a").css("color","green")