how do i change this jquery code into pure javascript?
<p>prelude: I'm sure this code is ugly so feel free to suggest a better way. </p>

<p>the goal: making a little web store that lets people preview their different configurations of a given product (a belt) as they make their selections. (e.g. red belt with a gold buckle vs red belt with a silver buckle, etc.) </p>

<p>you can see a working version here: <a href="http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html" rel="nofollow">http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html</a></p>

<p>and here's my ugly jquery. </p>

<pre><code>$(document).ready(function(){

 $("img").addClass("hide");
 $("img.belt-black").removeClass("hide");
 $("img.buckle-gold").removeClass("hide");
 $("img.coins-gold").removeClass("hide");


 $("input.belt-black").click(function(event){
    $("img.belt-black").removeClass("hide");
    $("img.belt-brown").addClass("hide");
    $("img.belt-red").addClass("hide");  
  });
 $("input.belt-brown").click(function(event){
    $("img.belt-black").addClass("hide");
    $("img.belt-brown").removeClass("hide");
    $("img.belt-red").addClass("hide");  
  });
 $("input.belt-red").click(function(event){
    $("img.belt-black").addClass("hide");
    $("img.belt-brown").addClass("hide");
    $("img.belt-red").removeClass("hide");  
  });

 $("input.buckle-gold").click(function(event){
    $("img.buckle-gold").removeClass("hide");
    $("img.buckle-silver").addClass("hide");
  });
 $("input.buckle-silver").click(function(event){
    $("img.buckle-gold").addClass("hide");
    $("img.buckle-silver").removeClass("hide");
  });

 $("input.coins-gold").click(function(event){
    $("img.coins-gold").removeClass("hide");
    $("img.coins-silver").addClass("hide");
  });
 $("input.coins-silver").click(function(event){
    $("img.coins-gold").addClass("hide");
    $("img.coins-silver").removeClass("hide");
  });

 });
</code></pre>

<p>thank you community! you're great. :)</p>

<p>jon</p>
