Bootstrap Modal Open Different Section Of Modal - css

Question

Consider the following:
I have 2 buttons a Login btn and a Registration Button. When either one of the buttons are clicked a bootstrap modal comes up, with 2 tabs, one for login and one for registration.
My Problem
Regardless if login button or registration button is clicked the modal always opens on the login tab, if user clicks register button I would like the modal to open on the registration tab.
JSFIDDLE LINK, CLICK HERE
Here is a visual example:
Two Buttons, user clicks button Bootstrap Modal Opens
Bootstrap Modal opens on login tab, section
If user clicks Register Button the Modal still opens on the login tab section, I would like this to change, so modal opens on registration tab when register button is clicked
Code Buttons:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-62 col-xs-6">
<button type="button" data-toggle="modal" data-target="#myModal" style="cursor:pointer" id="loginBtn">Login</button>
</div><!--Columns-->
<div class="col-lg-6 col-md-6 col-sm-62 col-xs-6">
<!-- I BELIEVE THE PROBLEM IS HERE-->
<button type="button" data-toggle="modal" data-target="#myModal#registration" style="cursor:pointer" id="regBtn">Register</button>
</div><!--Columns-->
</div><!--Row-->
Modal Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="myModalLabel">
Login/Registration
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<!--LOGIN TAB -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form class="form-horizontal" role="form" method="post" id="tabLogin" action="includes/loginScript.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<span id="email-info"></span>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<span id="pwd-info"></span>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
<!-- <span style="color:red;">Forgot Password</span>-->
</form>
<div id="tabloginMsg"></div>
<!--**********END LOGIN TAB*************** -->
</div>
<!--*************START REGISTRATION************************* -->
<div class="tab-pane" id="Registration">
<form name="regForm" class="form-horizontal" role="form" id="regTab" action="includes/classes/class.userRegistration.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2" for="regName">Name:</label>
<div class="col-sm-10">
<input type="text" name="userName" required class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="regLastName">Surname:</label>
<div class="col-sm-10">
<input type="text" name="userSurname" required class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="regEmail">Email:</label>
<div class="col-sm-10">
<input type="email" name="userEmail" required class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="regPword">Password:</label>
<div class="col-sm-10">
<input type="password" name="pword1" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="confRegPword">Confirm Password:</label>
<div class="col-sm-10">
<input type="password" name="pword2" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="regPhone">Phone:</label>
<div class="col-sm-10">
<input type="text" name="userPhone" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button name="submit" class="btn btn-danger" style="font-size:19px" >Register</button>
</div>
</div>
</form>
<div id="tabregMsg"></div>
</div>
</div>
<div id="OR" class="hidden-xs">
OR</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h4>
Sign in with</h4>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
Facebook
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can use jquery to get this approach
simply change your css code for TAB to
<ul class="nav nav-tabs">
<li id="loginLi">Login</li>
<li id="RegLi">Registration</li>
</ul>
then add this jQuery click action :
$("#loginBtn").on('click',function(){
$('#RegLi').removeClass('active');
$('#loginLi').addClass('active');
})
$("#regBtn").on('click',function(){
$('#loginLi').removeClass('active');
$('#RegLi').addClass('active');
})
you may improve this code but it's the idea to select the proper tabs.
see the demo here : https://jsfiddle.net/j4pkru1a/