How to define a Click handler function for multiple elements at the same time

Basically I have many CSS divs of which I need to write onclick function of each, I want to write the Click function once and in that I want to tell the function if it is element a do 1 and if it is element b do 2.

may I know how to write the function in jQuery?

$('.gil_Ads_BlankDock1').click(function(){ 

       $('#gDescZone1').hide();
       $('#gDescZone2').hide();
       $('#descAd1').hide();
       $('#descAd2').hide();
       $('#descAd3').hide();
       $('#descAd4').hide();           
       $('#header').hide();
       $('#contentArea').hide();
       $('#marquee').hide();           
       $('#BottomDock').fadeIn();
 });

 $('.gil_Ads_BlankDock2').click(function(){ 

       $('#gDescZone1').hide();
       $('#gDescZone2').hide();
       $('#descAd1').hide();
       $('#descAd2').hide();
       $('#descAd3').hide();
       $('#descAd4').hide();           
       $('#header').hide();
       $('#contentArea').hide();
       $('#marquee').hide();           
       $('#BottomDock').fadeIn();
 });

 $('.gil_Ads_Bl开发者_Python百科ankDock3').click(function(){ 

       $('#gDescZone1').hide();
       $('#gDescZone2').hide();
       $('#descAd1').hide();
       $('#descAd2').hide();
       $('#descAd3').hide();
       $('#descAd4').hide();           
       $('#header').hide();
       $('#contentArea').hide();
       $('#marquee').hide();           
       $('#BottomDock').fadeIn();
 });

above given code is my few click function which i want to write in shot cut.

$('.gil_Ads_BlankDock1, .gil_Ads_BlankDock2, .gil_Ads_BlankDock3').click(function(){ 

       $('#gDescZone1').hide();
       $('#gDescZone2').hide();
       $('#descAd1').hide();
       $('#descAd2').hide();
       $('#descAd3').hide();
       $('#descAd4').hide();           
       $('#header').hide();
       $('#contentArea').hide();
       $('#marquee').hide();           
       $('#BottomDock').fadeIn();
 });

Or, if you have a chance to refactor your markup, you can give your containers the same class, say "ads":

$('.ads').click(function(){ 

       $('#gDescZone1').hide();
       $('#gDescZone2').hide();
       $('#descAd1').hide();
       $('#descAd2').hide();
       $('#descAd3').hide();
       $('#descAd4').hide();           
       $('#header').hide();
       $('#contentArea').hide();
       $('#marquee').hide();           
       $('#BottomDock').fadeIn();
 });

You can also group your hide operations:

$('.ads').click(function(){ 
       $('#gDescZone1, #gDescZone2, #descAd1, #descAd2, #descAd3, \
          #descAd4, #header, #contentArea, #marquee').hide();           
       $('#BottomDock').fadeIn();
 });

Morover, you could give the elements that you hide the same class, say "hideable":

$('.ads').click(function(){ 
       $('.hideable').hide();           
       $('#BottomDock').fadeIn();
 });

The last form would be the proper way to do this, if you have a chance to add these additional classes to your markup.

+1 to all of the answers above. You can also maintain an array of all the selectors to hide if you can't rewrite your code:

var mult = ['#gDescZone1','#gDescZone2','#descAd1','#descAd2',
               '#descAd3','#descAd4','#header','#contentArea',"#marquee'];
$.each(mult,function(index,value){
  $(value).hide();
});

$('.gil_Ads_BlankDock1, .gil_Ads_BlankDock2, .gil_Ads_BlankDock3').click(function(){ 

       $('#gDescZone1, #gDescZone2, #descAd1, #descAd2, #descAd3, #descAd4, #header, #contentArea, #marquee').hide();
       $('#BottomDock').fadeIn();
 });

Write less, do more :)

Now if you just had a way to write less markup...