Reuse jQuery ready code by passing parameters

Question

Hi,

I am using the following piece of jQuery code:

    $('div#addMenu1').click(function(){
 if (!menuSet1){
  menuSet1 = true;
                    $('div#sliderOne').slideDown('slow');
                    $('img', this).attr('src', 'Green_Up.png');
                    $('img', this).attr('title', 'Collapse');
                    $('div#sliderOne').css("background-color", "#cee8ff");
 }
 else {
  menuSet1 = false;
                    $('div#sliderOne').slideUp('slow');
                    $('img', this).attr('src', 'Green_Down.png');
                    $('img', this).attr('title', 'Create a top menu item');
 }
});

The thing is though, I would like to reuse the same bit of code but be able to also check for div#addMenu[1234] as well as set menuSet[1234] and change img title

Any idea how I can reuse this code but based on the div section the user clicks on, pass the section number, say 3 and new title for img, to this code, so it would be using:

        $('div#addMenu3').click(function(){
 if (!menuSet1){
  menuSet3 = true;
                    $('div#sliderOne').slideDown('slow');
                    $('img', this).attr('src', 'Green_Up.png');
                    $('img', this).attr('title', 'Collapse');
                    $('div#sliderOne').css("background-color", "#cee8ff");
 }
 else {
  menuSet3 = false;
                    $('div#sliderOne').slideUp('slow');
                    $('img', this).attr('src', 'Green_Down.png');
                    $('img', this).attr('title', 'Create a Level 3 menu item');
 }
});

Hope this makes sense.

Thanks. Tony.

Answer 1

I'm not sure if this covers the scope of your question, but jQuery UI provides an accordion control which covers what you seem to want to do.

Answer 2

you can pass data to an event handler if you use the bind() flavor... http://docs.jquery.com/Events/bind

Answer 3

You could whip up a little plugin. There may be problems in this as it was "air coded".

$.fn.dropper = function(args) {
 // some default options - extended by args
 var opts = $.extend({
   sliderElem: null,
   sliderBg: '#cee8ff',
   imgOpen: 'Green_Up.png',
   imgClosed: 'Green_Down.png',
   titleOpen: 'Collapse',
   titleClosed: 'Open',
   openClass: 'open',       
 }, args);

 this.click(function() {
   // using a "hasClass" instead of your boolean logic
   if ($(this).hasClass(opts.openClass)) {
     $(this).removeClass(opts.openClass);

     // the opts will be passed in when you call the plugin
     $(opts.sliderElem).slideUp('slow');
     $('img', this).attr('src', opts.imgClosed).attr('title', opts.titleClosed);
   } else {
     $(this).addClass(opts.openClass);

     $(opts.sliderElem).slideDown('slow').css('background-color', opts.sliderBg);         
     $('img', this).attr('src', opts.imgOpen).attr('title', opts.titleOpen);
   }
 });
 return this;
}


$('div#addMenu1').dropper({sliderElem: 'div#sliderOne'});
$('div#addMenu3').dropper({sliderElem: 'div#sliderThree', titleClosed: 'Create a Level 3 menu Item'});