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:

<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>
        <p>1</p>
    </div>   
    <div>
        <p>2</p>
    </div>
</div>

Code (markup):

This is my HTML right now, and this is my JQuery: (Warning, noob code incoming)

<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();
                    var kids = $(event.target).children();
                    $('.active').removeClass('active');
                    $(event.target).addClass('active');
                    $('#caixa > div').hide().eq(id).show();  
                });

            }
            );
            </script>

Code (markup):

But I want to add more divs in the menu, like

<div id="caixa">
<div id="enter">      
<div id="login">           
<p>1</p>          
</div>
</div>
<div>
<p>2</p>
</div>
</div>

Code (markup):

I can't get it to work in jsfiddle but the code is essentially that jsfiddle.net/w7eyr

 

A little unsure as to what you're asking, but the code you provided is a bit... meh. Here's a fiddle of how you can do it simpler: http://jsfiddle.net/7kCB6/
If you want to display content from several divs when you click on one button, you can do this by changing the IDs to classes (so you'll have $("."+content+"") instead, and of course change it in the HTML as well.

 

I did as you said but i'm still having problem doing what i want to, if i have another div inside the div "enter" i've managed to make it appear the first time i load the page but as soon as i click enter again or toggle between tabs it doesn't appear anymore, how do i fix this?

And when i change it to $("."+content+"") and turn the divs into classes it still doesn't work, it shows the first time but then when i click on it again it disappears

 

I DID IT!!

 $(document).ready(function () {
                $('nav li').click(function () {
                    var content = $(this).text().toLowerCase();
                    $('nav li').removeClass('active');
                    $(this).addClass('active');
                    $("#caixa div").hide();
                    var kids = $("." + content + "").children();
                    $("." + content + "").show();
                    $(kids).show();
                });

            });

Code (markup):

thank you very much for your help

 

You're welcome You can simplify the code a little bit, though - you can change this:

var kids = $("." + content + "").children();
                    $("." + content + "").show();
                    $(kids).show();

Code (markup):

to this:

                  $("." + content + "").show().children().show();

Code (markup):