Question

I have a map with a bunch of buttons that show and hide container div’s. I don’t want to assign the same code to each button because it’s all the same.

I was thinking to create a variable when the button is clicked so it could replace a part in the DIV ID (handler?)

So I could refer to #fiche_8_1980_img_container as #fiche_VARIABLE.

Second part of my question is the animation functions I do are all looking like this:

  $('#fiche_8_1980_img_container').animate({"opacity" : 1,}, 150, function() {});

Is there a way to put this in an instance or object so I could call it easier?

Here is a piece of code that I use for the button.

$('#button_8_algiers').click(function() {
        $('#fiche_8_1980_img_container').css('visibility','visible');
                $('#fiche_8_1980_img_container').animate({"opacity" : 1,}, 150, function() {
                });     
        });         

If anyone could point me in the right direction it would be great, I don’t know where to start looking…

Thank you

Answer 1

would something like this help?

var ficheHandler = {
   animateFiche: function(fiche) {
      fiche
         .css('visibility','visible');
         .animate({"opacity" : 1,}, 150, function() {
          });
   }
}


$('#button_8_algiers').click(function() {
     ficheHandler.animateFiche($('#fiche_8_1980_img_container'));
});