My first-ever jQuery works, but it's not efficient. Any pointers? I've written my first completely self-written jQuery today. I just used the jQuery docs and I'm reasonably proud I got it to work, and working fine. It's not a very complex problem I'm solving, just an animated UI element, but it are my first steps, and I want to make sure I'm starting off right.

I think it's a lot of code for what I'm trying to achieve, and I'm looking for pointers or tips on how I could improve my code. I'm not at all averse to scrapping all jQuery here and doing it with pure JS either.

jQuery(document).ready(function () {
    event.preventDefault();
    var nav = jQuery(".navigation-menu");
    var button = jQuery(".navigation-title");

    function showNav() {
        nav.show('fast');
        button.removeClass('closed');
        button.addClass('open');
    }

    function hideNav() {
        nav.hide('fast');

        if (button.hasClass('open')) {
            button.removeClass('open');
        }

        button.addClass('closed');
    }

    hideNav();

    button.click(function () {
        if (button.hasClass('closed')) {
            showNav();
        } else if (button.hasClass('open')) {
            hideNav();
        } else if (!button.hasClass('open') || !button.hasClass('closed')) {
            hideNav();
        }
    });
});


Here's the fiddle: http://jsfiddle.net/yeawg/2/

I'm also wondering: am I using event.preventDefault() right?
I found .toggle() in the jQuery docs, and it seemed to me I could use that far better. I changed my code into:

jQuery(document).ready(function(){
    var nav = jQuery(".navigation-menu");
    var button = jQuery(".navigation-title");

    nav.toggle();

    button.click(function(event){
        event.preventDefault();
        nav.toggle('fast');
    });
});


This looks a lot leaner and better readable.