I need to down size my jQuery Code it to repetitive
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/10159096/i-need-to-down-size-jquery-code">I need to down-size jQuery code</a>  </p>
</blockquote>



<p>Yesterday I placed a jQuery code snipet that y developed and need a little help with, It works fine but, it’s just too long and repetitive, I do not mean disrespect to the grate programmers that tried to help me yesterday because there grate, but its almost sure I did not asked the right questions, one of theme suggested that the question needed to be asked here and so I am doing now.</p>

<p>OK, I have as you can see in the code, 12 tiles in a left div, those tiles are to be generated from a mySql database, and will show a thumbnail.. when clicking on a tile, the content on the right div will fade out and present the div corresponding to the clicked tile, the information on the appearing div is stored on a mySql db as well. Its working ok but. The code for the whole thing is just too big, and repetitive. It’s not a gallery and the icon on the tile probably has nothing to do with the content to de right.</p>

<p>Thanks to  <code>mrtsherman</code>, <code>jfriend00</code> and <code>elclanrs</code> for the help last night, I know it’s my fault for not asking the right question. 
Som, here is the code in action:  <a href="http://jsfiddle.net/tgcNd/6/" rel="nofollow">http://jsfiddle.net/tgcNd/6/</a></p>

<p>And below my Frankenstein of a code</p>

<pre><code>jQuery(function($) {
function boton1(event)
{
$(".vitrina1").css("opacity","0");
$(".vitrina1").css("top","0");
$(".vitrina1").animate({"opacity":1,"top":0},300, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton2(event)
{
$(".vitrina2").css("opacity","0");
$(".vitrina2").css("top","-712px");
$(".vitrina2").animate({"opacity":1,"top":-712},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton3(event)
{
$(".vitrina3").css("opacity","0");
$(".vitrina3").css("top","-1424px");
$(".vitrina3").animate({"opacity":1,"top":-1424},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton4(event)
{
$(".vitrina4").css("opacity","0");
$(".vitrina4").css("top","-2136px");
$(".vitrina4").animate({"opacity":1,"top":-2136},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton5(event)
{
$(".vitrina5").css("opacity","0");
$(".vitrina5").css("top","-2848px");
$(".vitrina5").animate({"opacity":1,"top":-2848},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton6(event)
{
$(".vitrina6").css("opacity","0");
$(".vitrina6").css("top","-3560px");
$(".vitrina6").animate({"opacity":1,"top":-3560},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton7(event)
{
$(".vitrina7").css("opacity","0");
$(".vitrina7").css("top","-4272px");
$(".vitrina7").animate({"opacity":1,"top":-4272},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton8(event)
{
$(".vitrina8").css("opacity","0");
$(".vitrina8").css("top","-4984px");
$(".vitrina8").animate({"opacity":1,"top":-4984},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton9(event)
{
$(".vitrina9").css("opacity","0");
$(".vitrina9").css("top","-5696px");
$(".vitrina9").animate({"opacity":1,"top":-5696},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton10(event)
{
$(".vitrina10").css("opacity","0");
$(".vitrina10").css("top","-6408px");
$(".vitrina10").animate({"opacity":1,"top":-6408},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton11(event)
{
$(".vitrina11").css("opacity","0");
$(".vitrina11").css("top","-7120px");
$(".vitrina11").animate({"opacity":1,"top":-7120},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton12(event)
{
$(".vitrina12").css("opacity","0");
$(".vitrina12").css("top","-7832px");
$(".vitrina12").animate({"opacity":1,"top":-7832},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
}
$('#btn1').bind('click', boton1);
$('#btn2').bind('click', boton2);
$('#btn3').bind('click', boton3);
$('#btn4').bind('click', boton4);
$('#btn5').bind('click', boton5);
$('#btn6').bind('click', boton6);
$('#btn7').bind('click', boton7);
$('#btn8').bind('click', boton8);
$('#btn9').bind('click', boton9);
$('#btn10').bind('click', boton10);
$('#btn11').bind('click', boton11);
$('#btn12').bind('click', boton12);
});
</code></pre>

<p>The HTML</p>

<pre><code>&lt;div id="contenedorPrimario"&gt;
&lt;div id="botones"&gt;
&lt;div class="boton" id="btn1"&gt;&lt;a class="tooltip" rel="Contenedor 1"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn2"&gt;&lt;a class="tooltip" rel="Cajón&lt;br&gt;Contenedor 2"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen2.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn3"&gt;&lt;a class="tooltip" rel="Este es el&lt;br&gt;Cajón 3"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen3.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn4"&gt;&lt;a class="tooltip" rel="Ejemplo de contenido&lt;br&gt;dentro del cajón&lt;br&gt;Contenedor 4"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen4.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn5"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn6"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn7"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen7.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn8"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen8.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn9"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen9.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn10"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen10.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn11"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen11.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="boton" id="btn12"&gt;&lt;a class="tooltip" rel="Aqui texto"&gt;&lt;img src="http://www.auviproducciones.com/more/imagenes/imagen12.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="aparador"&gt; &lt;!-- main right container --&gt;
&lt;div id="mercancia"&gt; &lt;!-- info Divs container this one scrolls uo and down if animation tyoe changes from fade to scroll --&gt;
&lt;div class="vitrina1"&gt;Hello this his window #1&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina2"&gt;Hello this his window #2&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina3"&gt;Hello this his window #3&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina4"&gt;window #4&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina5"&gt;window #5&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina6"&gt;window #6&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina7"&gt;window #7&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina8"&gt;window #8&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina9"&gt;window #9&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina10"&gt;window #10&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina11"&gt;window #11&lt;br&gt;with mySql content&lt;/div&gt;
&lt;div class="vitrina12"&gt;window #12&lt;br&gt;with mySql content&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Adn finally the CSS</p>

<pre><code>#contenedorPrimario { position:relative;margin-left:auto;margin-right:auto;width:100%; background: url(../imagenes/fondo_index.jpg); width: 1100px; height: 800px;}
.clear {clear:both;}
/* Inicia Cajón Izquierdo */
#botones {position:absolute; width:450px; height: 592px; margin-left:3px; margin-right:20px;margin-top:50px;padding-bottom:4px;}
.boton {width:150px;height:142px;float:left;cursor: default;}
.boton img {width:150px;height:142px;}
#sociales { position: absolute; width:450px; height: 120px; margin-left: 2px; margin-top: 620px; /*background: #FF3300; */}
/* Inicia Cajón Derecho */
#aparador {position:absolute; margin-top: 50px; margin-left: 456px; width:641px;overflow: hidden; height:712px; background:#666; margin-right: 20px; }
#mercancia {position:absolute; width: 641px; height: 9324px; margin-top: 0px; visibility: visible; background: #fff; }
.vitrina1, .vitrina2, .vitrina3, .vitrina4, .vitrina5, .vitrina6, .vitrina7, .vitrina8, .vitrina9, .vitrina10, .vitrina11, .vitrina12 { position:relative; width:641px; height: 712px; }
.vitrina1 { /*background-color: #33CCCC;*/ background: #D2D2D2;}
.vitrina2 { background-color: #999900;}
.vitrina3 { background-color: #CC6600;}
.vitrina4 { background-color: #AA0000;}
.vitrina5 { background-color: #99CC33;}
.vitrina6 { background-color: #0066CC;}
.vitrina7 { background-color: #570699;}
.vitrina8 { background-color: #CC33CC;}
.vitrina9 { background-color: #02F965;}
.vitrina10 { background-color: #FFFF00;}
.vitrina11 { background-color: #C80461;}
.vitrina12 { background-color: #000066;}​
</code></pre>
