Question

I have an anchor like:

<a href="#" onclick="showInfo();" class="nostyle" ></a>

I don’t have id or class name because I generated it dynamically in xslt.

When I click on it, it shows a previously hidden div that contains an <a id='close'> tag. The idea is to change the background color of the first anchor when I click on the close button, but I don’t know how I can set that up.

How can I get the anchor which was clicked and therefore change it?

Answer 1

Check out this solution for a page that has multiple hidden divs, and each div has a show/hide link

http://jsfiddle.net/qfQhq/

This works for 1 div and 1 hide and 1 show link

An easy way to do this, is when you click the link to show the hidden div, save a reference to the link by stashing the $(this) pointer into a global variable and then displaying the hidden div. If the link which opens the hidden div has a background-color (or class to do so) you may want to remove it at this point. (if the color only shows up when you close the div, you may want it to disappear when you open the div too?)
Once you click the close button, you can simply reference the same global variable as if it is a DOM element, and change it’s background color (or add a class to it, that does it for you).

$(document).ready(function(){

1) Create Global Variable

var showInfoLink = "null";

2) Store $(this) (DOM Element that triggered showInfo();)

function showInfo() {
    showInfoLink = $(this);
    showInfoLink.removeClass("highlighted"); //if you closed the div & opened again
    $("#hidden_div_selector").css("display", "block"); //show hidden div
}

3) Change background-color or the link

$("#hidden_div_close_button_selector").click(function(){
    if (showInfoLink != "null")
    {
        showInfoLink.addClass("highlighted"); //color the background of the link
        $(this).css("display", "none"); //hide the hidden div
        showInfoLink = "null";
    }
}

4) CSS For ‘highlighted’ class (changed bg color)

.highlighted {
    background-color: #de9f3c; //random color
}

make sure this is all in $(document).ready()

});