How to add more than one div in a tabbed menu?

How to add more than one div in a tabbed menu?

Hey guys, I'm building a website where I have a menu (let's say it's a box) that has two tabs, "Enter" and "About".

Now I've seen a video tutorial on how to make the tabbed menu work with JQuery, but what If I Want to add more than one div to the content?

For example:

  1. div id="tabs"> <ul> <li class="active" style="border-top-left-radius: 4px; border-right: 0px;">Enter</li> <li id="2" style="border-top-right-radius: 4px; border-left: 0px;">About</li> </ul> </div> <div id="caixa"> <div id="enter">   <p>1</p> </div> <div> <p>2</p> </div> </div>
This is my HTML right now, and this is my JQuery: (Warning, noob code incoming)

  1. <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery', '1.4.3'); google.setOnLoadCallback(function () { $('#caixa div:not(:first)').hide(); $('#tabs li').click(function (event) { var id = $(event.target).index(); $('.active').removeClass('active'); $(event.target).addClass('active'); $('#caixa div').hide().eq(id).show(); }); } ); </script>
But I want to add more divs in the menu, like

  1. <div id="caixa"> <div id="enter">       <div id="login">             <p>1</p>           </div> </div> <div> <p>2</p> </div> </div>
But when I try to do this, the content just doesn't appear at all. I know the problem is 
with my JQuery, how can I make this work? Thank you very much in advance.