jQuery call custom function on click

Question

How would I correctly call the specialHouse function after the h1 was clicked, in way that would still allow $(this) to represent div.content. Currently the below does not work with the error "Uncaught TypeError: Object [object Object] has no method 'specialHouse'"

function specialHouse()
{
    $(this).slideDown(500, function(){
      $(this).delay(2000).slideUp();
    });
 };

$('div.content').hide();
$('h1').on('click', function(){
    $(this).next('div.content').specialHouse();
})

Thanks for any help :)

Answer 1

You have to tell jQuery about your new function:

jQuery.fn.specialHouse = function() {
   return this.slideDown(500, function(){
     $(this).delay(2000).slideUp();
   }
}

As we return this our function is chain able:

$("a").specialHouse().text("Hello World");

Answer 2

The way you've tried it works only for jQuery plugins. You can however invoke the function like this (the context this will be set as expected):

$('h1').on('click', function() {
    $(this).next('div.content').each(specialHouse);
});

Answer 3

Try :

$('div.content').hide();
$('h1').on('click', function(){
    specialHouse($(this).next('div.content'));
}) 

function specialHouse(elem){
  $(elem).slideDown(500, function(){
     $(this).delay(2000).slideUp();
   });
};