javascript - Creating spans that hide when another object is clicked -

here html:

<div id="sidebar">     <table id="table1">         <tr>             <th>table</th>         </tr>         <tr>             <td>                 <a rel="img1">link1</a>             </td>             <td>                 <a rel="img2">link2</a>             </td>                     </tr>     </table> </div>  <div id="box">     <img src="cant-believe-it-icon.png" id="img1"/>     <img src="too-much-icon.png" id="img2"/> </div>  <span>text fist image</span> <span>text second image</span> 

and jquery:

$('a').click(function(){     imgid = $(this).attr('rel');     $('a').removeclass('active');     $(this).addclass('active');      $('img').hide();         $('#'+imgid).fadein('slow'); }); 

when first td clicked, first image visible. when second td clicked, first image hidden, , second image visible. how apply spans well?

update: set images , spans class="groups". paired first image first span etc. using id="group1", "group2" , on. set rel's of td's "group1", "group2" etc. javascript reads:

$( window ).load(function() {     $(".groups").hide()     $('a').click(function(){     var rel = $(this).attr('rel');     $('a').removeclass('active');     $(this).addclass('active');     $(".groups").hide()     $('#'+rel).fadein('slow'); }); 

everything hides when opened, when td's clicked nothing happens?

solution

html

<div id="box">   <img src="http://placehold.it/350x250/&text=img1" class="img1"/>   <img src="http://placehold.it/350x250/&text=img2" class="img2"/> </div>  <span class="img1">text fist image</span> <span class="img2">text second image</span> 

css

$('a').click(function(){   var rel = $(this).attr('rel');   $('a').removeclass('active');   $(this).addclass('active');   $('img').hide();       $('span').hide();      $('.'+rel).fadein('slow'); });