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

Question

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_BlankDock3').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.

Answer 1

$('.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.