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!