Using JQuery/Javascript arrays to form two sided fading layout
<p>When I do sites for clients I constantly get the request to have a two sided layout, where buttons on the left cause divs on the right to fade in and fade out appropriately.  For a long while I've been writing each case. (which is a bit silly and time consuming).  I want to systematize that, but I've been having a hard time since I don't understand how javascript/jquery works with .click() and arrays.</p>

<pre><code>$(document).ready(function(){
    var left = new Array($('#a'),$('#b'), $('#c'),$('#d'), $('#e'));
    var right = new Array($('#1'),$('#2'),$('#3'),$('#4'),$('#5'));
   // left[0].click(function(){right[0].fadeIn('fast');})
    var numbers = new Array(1,2,3,4,5);

    function fadey(x){
        left[x].click(function(){
          right[x].fadeIn('fast');
         })

    }
    for (var i = 0; i &lt; left.length; i++) {
      fadey(i);
    };
})
</code></pre>

<p>This code gets it so that the left hand side buttons cause the corresponding right hand div to appear.   The problem is that I can't seem to get the other divs to disappear without causing all the divs to disappear.</p>

<p>Ideally it would be dope if I could have one line of code that simply checks when the left-hand jquery object array is clicked, gets its index value, and causes the corresponding right hand side jquery object array to appear, while also hiding the other ones.</p>

<p>This way I can just plug elements into each array and then never have to worry about writing these cases one by one.  </p>

<p>Thank you so much for your help! </p>
