Question

I’m just programming a little function that toggles a content by fading it in and out.

this.advancedSearch = function(fieldset, triggerBtn){
    fieldset.hide()
    triggerBtn.click(function(){
        fieldset.toggle(function(){ $(this).stop(false, true).fadeIn(300) }, function(){ $(this).stop(false, true).fadeOut(300) });
        return false;
    })
}

if just I use toggle() it works, but when i insert the two functions nothing happens and no error is thrown. Is there something i have done wrong?

Answer 1

I assume that you intend the triggerBtn to fire the toggle event on fieldset.

If so, try this:

this.advancedSearch = function(fieldset, triggerBtn){
    fieldset.hide();
    triggerBtn.click(function(){
        fieldset.click();
    });
    fieldset.toggle(function(){ $(this).stop(false, true).fadeIn(300) }, 
                    function(){ $(this).stop(false, true).fadeOut(300) })
}

The way you had it, every time you clicked on triggerBtn, you were assigning the toggle event handler to the fieldset.

---

EDIT:

Alternatively, if you don’t need the click (toggle) event on fieldset at all, then David’s answer would work.