Question

How do I Change background color to green when link is clicked and keep the color green until I click the link again then the color must be white

I have this code so far:

    <% foreach (var group in Model.Results)
       { %>       

         <div id="group-select<%: group.GroupId %>" style="width:95%; height:50px; border:solid 1px black; margin:5px;" >
            <h3><a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="changer<%: group.GroupId %>"  ><%: group.Name %></a></h3> 
         </div>

    <% } %>

and the JS:

<script type="text/javascript">   
function OnGroupClicked(groupId) {
  $("#changer" + groupId).on("click", function (e) {
    e.preventDefault();
    var body = $('#group-select' + groupId),
        green = "rgb(0, 128, 0)",
        white = "rgb(255, 255, 255)";

    if (body.css("backgroundColor") !== green) {
      body.css("backgroundColor", green);
    } else {
      body.css("backgroundColor", white);
    }
  });
}
</script>

can some one help me please?
the color green wil show that a specific group is selected and when it is white it is NOT selected. So when the page first loads up it will be white. I click on it and it is green and stays green until I click it again.

thanks

Answer 1

You could do something like this:

http://jsbin.com/evupih/1/edit

The problem with your code is, you check for the hex value. But if you read the backgroundColor, you will get the rgb value 😉