Класс div Jquery изменяется при нажатии на ссылку меню / ссылки

Мне нужно, чтобы начальный ящик отображался в режиме onload, а не только при щелчке элемента меню.

HTML:

   <div id='nav'>
       <a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a   
        id="show_entrees">Entrees</a>
         </div>

          <div id="menu_container">
         <div id="menu_apps">
        Content of the App Section Here
     </div>
      <div id="menu_soups">
         Content of the Soups Section Here
        </div>
      <div id="menu_entrees">
         Content of the Entrees Section Here
         </div>
         </div>

Jquery:

  $(document).ready(function(){
  $("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $("#menu_container div").hide(); 
  $("#menu_container #menu_"+id[1]).show();
    });
     });

CSS:

  #menu_container{
    width: 650px;
    height: auto;
  padding-left: 30px;
  }

 #menu_container div{display:none;}

Если вы посмотрите на эту скрипку - http://jsfiddle.net/KUtY5/1/

Я хотел бы добавить время перехода, когда элементы меняются, а также отображает первый элемент на загрузке страницы. Затем, когда вы нажимаете на другие элементы, они соответственно меняются.

Есть идеи? :(