How to enable/disable div layer with jquery

Question

I have the following request...i would like to have 4 href tags and when i click to a specific one to show a div layer which has been set to hidden by default in CSS. When i click to another href to show the other div and closing the previous one. I would like appreciate any help!

HTML

            <p><a href="#" id="btn1">Link1</a></p>
            <p><a href="#" id="btn2">Link2</a></p>
            <p><a href="#" id="btn3">Link3</a></p>
            <p><a href="#" id="btn4">Link4</a></p>

CSS

 #index_main_refSL {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#09F;
     visibility:hidden;

    } 
#index_main_refFL {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#C93;
     visibility:hidden;

    } 
#index_main_refFL2 {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#96C;   
     visibility:hidden;

    } 
#index_main_refAm {
     display:block;
     position:absolute;
     width:600px;
     height:495px;
     background:#FF6;
     visibility:hidden;
    } 

JQUERY

('#btn1').click(function(e) { 

            $('#index_main_refSL').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refFL').hide();
            $('#index_main_refFL2').hide();
            $('#index_main_refAm').hide();




    });
    $('#btn2').click(function(e) { 

            $('#index_main_refFL').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refSL').hide();
            $('#index_main_refFL2').hide();
            $('#index_main_refAm').hide();
            /*$('#index_main_refFL').stop();*/


    });
    $('#btn3').click(function(e) { 

            $('#index_main_refFL2').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refSL').hide();
            $('#index_main_refFL').hide();
            $('#index_main_refAm').hide();
            /*$('#index_main_refFL2').stop();*/


    });
    $('#btn4').click(function(e) { 
            $('#index_main_refAm').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
            $('#index_main_refSL').stop();
            $('#index_main_refSL').hide();
            $('#index_main_refFL').hide();
            $('#index_main_refFL2').hide();
            /*$('#index_main_refAm').stop();*/


    });

Answer 1

well you can use fadeIn() instead of animate()

 $('#btn1').click(function(e) { 
     $('#index_main_refSL').fadeIn('slow');
     $('#index_main_refFL,#index_main_refFL2,#index_main_refAm').fadeOut(); //multiselector

});

and in CSS ..change display:block to none

#index_main_refSL {
  display:none;
  position:absolute;
  width:600px;
  height:495px;
  background:#09F;
}