jQuery Combine Functions

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' ?

Have you thought of using the jQuery toggle api.jquery.com/toggle-event — scottheckel
– scottheckel, Commented Oct 26, 2011 at 20:21

JaredPar · Accepted Answer · 2011-10-26 20:22:10Z

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'));

Craig M · Accepted Answer · 2011-10-26 20:13:14Z

0

Absolutely. You want to write a plugin. There's tons of tutorials on making a jQuery plugin, but the official docs give a good start.

answered Oct 26, 2011 at 20:13

Craig M

5,6084 gold badges34 silver badges43 bronze badges

4 Comments

Blazemonger Over a year ago

That is a comment, not an answer. You sound like you're saying, "We won't help you, RTFM," and expecting to get points for it.

Craig M Over a year ago

The question was "Can I create one function and put in my own 'clickerX' and 'hiddenX' ?" The proper way to do this with jQuery is to write a plugin. How is this not an answer? Was I supposed to write the code for him?

Hcabnettek Over a year ago

I have to agree with Craig. While examples are nice, he does answer User's question. He also provides a link to the docs to get the guy started. How is that not an answer? Sometimes redundant code examples aren't as helpful as the documentation of the product. Where there are tons of examples I might add.

Blazemonger Over a year ago

Answers should be constructive, should show some creative effort, and should show an actual attempt to understand the problem. Craig's response did none of those things. More importantly, his tone came across (to me) as unhelpful and dismissive. However, he clearly does not make a habit of such answers, for which I am appreciative.

Collectives™ on Stack Overflow

jQuery Combine Functions

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related