Making transitions respond to onclick

Question

Ive managed the 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?

Answer 1

...