Hello,
I have a little issue concerning an animation-effect which loads a certain div into the body of the site.

Let me be more precise: I have a div with the id 'contact': <div id="contact">content</div> The jquery code loads the contents within that div, when I press the link with the id 'ajax_contact': <a href="#" id="ajax_contact">link</a>.

The code is working perfectly. However, I want #contact to be HIDDEN when the site loads, i.e. the default state must be non-visible. Only when the user clicks the link #ajax_contact, the div must appear.

Please have a look at the jquery code:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#ajax_contact').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #contact';
            $('#contact').load(toLoad)
        }
    });

    $('#ajax_contact').click(function(){

        var toLoad = $(this).attr('href')+' #contact';
        $('#contact').hide('fast',loadContent);
        $('#load').remove();
        $('body').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#contact').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#contact').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

I am not sure whether I must change something inside the HTML, but I believe the key is inside the jquery-code. I also tried giving the #contact a CSS style of visible:none, yet this loops and makes the jquery impossible to load the #contact in.

I hope I've explained myself well; thank you very much in advance.
Chris