title: JavaScript; calling a function on pageload
body: <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>