Question

I have an article:

<article>
    Some paragraphs.
</article>

Below that I have my contact:

<div id="contact">
    stuff, this form is 600 px tall
</div>

contact is set to display:none;.

I use jQuery to toggle it. What I’m trying to do is modify this script from http://tutsplus.com/lesson/slides-and-structure/ so that it fades out the article text and then slides in the contact form. Having some trouble.

Code:

<script>

(function() {

$('html').addClass('js');

var contactForm = {

    container: $('#contact'),
    article: $('article'),

    init: function() {
        $('<button></button>', {
            text: 'Contact Me'
        })
            .insertAfter('article:first')
            .on('click', function() {
                console.log(this);
                this.show();
                // contactForm.article.fadeToggle(300);
                // contactForm.container.show();
            })
    },

    show: function() {
        contactForm.close.call(contactForm.container);
        contactForm.container.slideToggle(300);
    },

    close: function() {
        console.log(this);
        $('<span class=close>X</span>')
            .prependTo(this)
            .on('click', function(){
                contactForm.article.fadeToggle(300);
                contactForm.container.slideToggle(300);
            })
    }
};

contactForm.init();

})();

</script>

The part that is not working is:

.on('click', function() {
    console.log(this);
    this.show();
    // contactForm.article.fadeToggle(300);
    // contactForm.container.show();
})

When I do .on('click', this.show); it works fine, when I put this.show in a function it does not work!

Answer 1

this.show() works just fine within close(), because this is within scope of close(), but not available within scope of .on('click') callback function, so you need to keep reference of this like below and reuse that.

 close: function() {
        // keeping reference
        var reference = this;

        $('<span class=close>X</span>')
            .prependTo(this)
            .on('click', function(){
                //  using above reference here
                reference.article.fadeToggle(300);
                reference.container.slideToggle(300);
            })
    }