Fading out an article and dropping down a form at the same time?
<p>I have an article:</p>

<pre><code>&lt;article&gt;
    Some paragraphs.
&lt;/article&gt;
</code></pre>

<p>Below that I have my <code>contact</code>:</p>

<pre><code>&lt;div id="contact"&gt;
    stuff, this form is 600 px tall
&lt;/div&gt;
</code></pre>

<p><code>contact</code> is set to <code>display:none;</code>.</p>

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

<p>Code:</p>

<pre><code>&lt;script&gt;

(function() {

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

var contactForm = {

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

    init: function() {
        $('&lt;button&gt;&lt;/button&gt;', {
            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);
        $('&lt;span class=close&gt;X&lt;/span&gt;')
            .prependTo(this)
            .on('click', function(){
                contactForm.article.fadeToggle(300);
                contactForm.container.slideToggle(300);
            })
    }
};

contactForm.init();

})();

&lt;/script&gt;
</code></pre>

<p>The part that is not working is:</p>

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

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