Question

I have two similar functions that I would like to combine so that I can use anywhere throughout the site. It’s a simple jquery slideUp / slideDown effect that finds the div with the class ‘hidden’ and on click, it shows and hides

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

    // grab the hidden content
    var desc = $(this).parent().find('.hidden');

    // remove toggle class and slide up
    if ($(this).hasClass('toggled')) {
       $(this).removeClass('toggled');
       $(desc).slideUp(400, 'linear');  
    }

    // add toggle class, slide down, and move the page up
    else {
       var loc = this;

      $(desc).slideDown(400, 'linear', function () {
        $.scrollTo($(loc).offset().top - 60, 400);
      });

      $(this).addClass('toggled');
      $('.clicker1').not(this).removeClass('toggled');
      $('.hidden').not(desc).slideUp(400, 'linear');    
    }
  });

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

    // grab the hidden content
    var desc = $(this).parent().find('.hidden2');

    // remove toggle class and slide up
    if ($(this).hasClass('toggled')) {
       $(this).removeClass('toggled');
       $(desc).slideUp(400, 'linear');  
    }

    // add toggle class, slide down, and move the page up
    else {
       var loc = this;

      $(desc).slideDown(400, 'linear', function () {
        $.scrollTo($(loc).offset().top - 60, 400);
      });

      $(this).addClass('toggled');
      $('.clicker2').not(this).removeClass('toggled');
      $('.hidden').not(desc).slideUp(400, 'linear');    
    }
  });

Can I create one function and put in my own ‘clickerX’ and ‘hiddenX’ ?

Answer 1

It looks like the handlers only differ by the class’s they use as selectors. The easiest approach is to write a function which generates a click handler based on the class names. Try the following

var makeHandler = function(className, hiddenClassName, ) {

  return function() {
    // grab the hidden content
    var desc = $(this).parent().find(hiddenClassName);

    // remove toggle class and slide up
    if ($(this).hasClass('toggled')) {
       $(this).removeClass('toggled');
       $(desc).slideUp(400, 'linear');  
    }

    // add toggle class, slide down, and move the page up
    else {
       var loc = this;

      $(desc).slideDown(400, 'linear', function () {
        $.scrollTo($(loc).offset().top - 60, 400);
      });

      $(this).addClass('toggled');
      $(className).not(this).removeClass('toggled');
      $(hiddenClassName).not(desc).slideUp(400, 'linear');    
  };
};


$('.clicker1').click(makeHandler('.clicker1', '.hidden'));
$('.clicker2').click(makeHandler('.clicker2', '.hidden2'));