How to making transitions respond to onclick?

[Dmal]

Ive managed a simple hover transition

 
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
 

but i would like to make it clickable instead of hover. The only example i found that illustrates clickable transitions is (http://css3.bradshawenterprises.com):

 
<div id="cf2" class="shadow">
     <img class="bottom" src="/tests/images/Stones.jpg" />
     <img class="top" src="/tests/images/Summit.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>
 
#cf2 {
     position:relative;
     height:281px;
     width:450px;
     margin:0 auto;
}
#cf2 img {
     position:absolute;
     left:0;
     -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
}
 
#cf2 img.transparent {
     opacity:0;
}
#cf_onclick {
     cursor:pointer;
}               
 
$(document).ready(function() {
     $("#cf_onclick").click(function() {
          $("#cf2 img.top").toggleClass("transparent");
     });
});     
 
 

I tried implementing this but have had no luck and i dont see any way of
adpating this for more complex moves. Anyone know of a simpler way of
making clickable css transitions?