Question

I have multiple divs, each with a unique id and image.

I would like to change/toggle the image css based on the div that is clicked on.
Click once and it changes the opacity. Click again and it returns to the original state.

Any ideas on the approach would be appreciated.

<div class="card" id="card1"><img src="images/ten.gif" class="icon" /></div>
<div class="card" id="card2"><img src="images/buf.gif" class="icon" /></div>
<div class="card" id="card3"><img src="images/cle.gif" class="icon" /></div>
<div class="card" id="card4"><img src="images/kc.gif" class="icon" /></div>
<div class="card" id="card5"><img src="images/atl.gif" class="icon" /></div>
<div class="card" id="card6"><img src="images/min.gif" class="icon" /></div>
<div class="card" id="card7"><img src="images/nyg.gif" class="icon" /></div>
<div class="card" id="card8"><img src="images/mia.gif" class="icon" /></div>
<div class="card" id="card9"><img src="images/stl.gif" class="icon" /></div>
<div class="card" id="card10"><img src="images/hou.gif" class="icon" /></div>
<div class="card" id="card11"><img src="images/chi.gif" class="icon" /></div>
<div class="card" id="card12"><img src="images/pit.gif" class="icon" /></div>
<div class="card" id="card13"><img src="images/ind.gif" class="icon" /></div>
<div class="card" id="card14"><img src="images/no.gif" class="icon" /></div>

…etc

Answer 1

This will give you a nice animated effect purely from jquery, so no need for extra css…

$(".card").toggle(function() {
    $(this).find("img").animate({ opacity: 0.25 });
},
function() {
    $(this).find("img").animate({ opacity: 1 });
});

It just toggles the opacity – 0.25 for first click, 1 for next click, 0.25 for next click etc..

Here’s a working example…

http://jsfiddle.net/uHpqf/1/