Bootstrap popup modal with nested tabs issue

Question

I need the buttons below "create and account" and "sign in" to open the popup modal with the corresponding tab activated. Currently, both buttons open the popup modal on the default active tab. The active class is on the "sign in" button. I need the "create an account" button to activate the 'create an account" Tab

<div class="form-group navbar-right">
    <button id="login" type="button" class="btn btn-default navbar-btn" data-target="#signin" data-toggle="modal">Create an Account</button>
    <button id="create" type="button" class="btn btn-primary navbar-btn" data-target="#signin" data-toggle="modal">Sign In</button>
</div>


<div class="modal fade" id="signin" role="dialog">
    <div class="" id="loginModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
            <h3 style="color:black;">Have an Account?</h3>
        </div>
        <div class="modal-body">
            <div class="well">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#login" data-toggle="tab">Sign In</a></li>
                    <li class=""><a href="#create" data-toggle="tab">Create Account</a></li>
                </ul>

                <div id="myTabContent" class="tab-content ">
                    <div class="tab-pane active in" id="login">
                        <form class="form-horizontal" action='' method="POST">
                            <fieldset>
                                <div id="legend">
                                    <legend class="">SignIn</legend>
                                </div>    

                                <div class="control-group">
                                    <!-- Username -->
                                    <label class="control-label"  for="username">Username</label>
                                    <div class="controls">
                                        <input type="text" id="username" name="username" placeholder="" class="input-xlarge">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <!-- Password-->
                                    <label class="control-label" for="password">Password</label>
                                    <div class="controls">
                                        <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <!-- Button -->
                                    <div class="controls">
                                        <button class="btn btn-success">Signin</button>
                                        <div class="forgotpw">
                                            <a href="#">Forgot Username?</a><br/>
                                            <a href="#">Forgot Password?</a>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>                
                    </div>
                    <div class="tab-pane fade.in" id="create">
                        <form id="tab">
                            <label>Username</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>First Name</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>Last Name</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>Email</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>Address</label>
                            <textarea value="Smith" rows="3" class="input-xlarge span5"></textarea>     
                            <div>
                                <button class="btn btn-primary">Create Account</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
        </div>
    </div>
</div>

Answer 1

First of all, you have an error in your code. (dupplicate id's)

<button id="login" type="button" class="btn btn-default navbar-btn" data-target="#signin" data-toggle="modal">Create an Account</button>
<button id="create" type="button" class="btn btn-primary navbar-btn" data-target="#signin" data-toggle="modal">Sign In</button>

And

<div class="tab-pane active in" id="login">
<div class="tab-pane fade.in" id="create">

So i renamed those id's with create_btn, login_btn and create_tab, login_tab. Another error is that your button id is create and the label is Sign in and for the login id the label is Create an Account. (switched)

All you have to do besides this corrections is to add the folowing javascript in your code:

$( document ).ready(function() {   
    $('#create_btn').on('click', function(){
        $('#create_tab').tab('show')
    })

    $('#login_btn').on('click', function(){
        $('#login_tab').tab('show')
    })
});

1. Code here.
2. Result here.