JavaScript; calling a function on pageload
<p>All I want to do is to call this function while page is loading or after loading  automaticly, I mean without hover or click or etc.
If I manage that I am going to put it in a for loop with a delay function in order to call bg1, bg2 bg3 and bg4 respectively</p>

<p>I have read so many questions all seem similar but somehow they don't work for me.
Could you please help me about it?</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(function slide() 
{
    $('#accordion &gt; li.bg1')(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'350px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        }
        ),
    function () {
        var $this = $(this);
        $this.stop().animate({'width':'115px'},1000);
        $('.heading',$this).stop(true,true).fadeIn();
        $('.description',$this).stop(true,true).fadeOut(500);
        $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
});
&lt;/script&gt;



&lt;div id="content"&gt;
&lt;ul class="accordion" id="accordion"&gt;
    &lt;li class="bg1"&gt;
        &lt;div class="heading"&gt;Heading&lt;/div&gt;
        &lt;div class="bgDescription"&gt;&lt;/div&gt;
        &lt;div class="description"&gt;
            &lt;h2&gt;Heading&lt;/h2&gt;
            &lt;p&gt;Some descriptive text&lt;/p&gt;
            &lt;a href="#"&gt;more ?&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="bg2"&gt;
        &lt;div class="heading"&gt;Heading&lt;/div&gt;
        &lt;div class="bgDescription"&gt;&lt;/div&gt;
        &lt;div class="description"&gt;
            &lt;h2&gt;Heading&lt;/h2&gt;
            &lt;p&gt;Some descriptive text&lt;/p&gt;
            &lt;a href="#"&gt;more ?&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="bg3"&gt;
        &lt;div class="heading"&gt;Heading&lt;/div&gt;
        &lt;div class="bgDescription"&gt;&lt;/div&gt;
        &lt;div class="description"&gt;
            &lt;h2&gt;Heading&lt;/h2&gt;
            &lt;p&gt;Some descriptive text&lt;/p&gt;
            &lt;a href="#"&gt;more ?&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="bg4"&gt;
        &lt;div class="heading"&gt;Heading&lt;/div&gt;
        &lt;div class="bgDescription"&gt;&lt;/div&gt;
        &lt;div class="description"&gt;
            &lt;h2&gt;Heading&lt;/h2&gt;
            &lt;p&gt;Some descriptive text&lt;/p&gt;
            &lt;a href="#"&gt;more ?&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>
