<section class="bg" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                  <ul class="nav nav-tabs">
                    <li><a href="#" id="signin">Log In</a></li>
                    <li><a href="#" id="signup">Sign Up</a></li>
                  </ul>
                </div>
            </div>
        </div>
   </section>

   <!--Log in Form-->
   <div class="container-fluid" style="background-color:#69F0AE;height:auto;display:none"
   id="signinform">
     <h2 style="color:#fff">Log In</h2>
     <form>
    <div class="form-group">
    <label for="user">User:</label>
    <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
    </div>
    </div>
    <div class="form-group">
    <label for="pwd">Password:</label>
    <div  class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
    </div>
    </div>
    <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Log in</button>
    <button type="submit" class="btn btn-primary">Log in with Facebook</button>
    <br><br>
    <div class="form-group">
      <div class="col-md-12 control">
        <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
          Don't have an account?
          <a href="#" onClick="$('#signinform').hide(); $('#signupform').show()">
            Sign Up Here
          </a>
        </div>
      </div>
    </div>
    </form>
    <br><br>
   </div>

   <!--Sign Up Form-->
   <div class="container-fluid" style="background-color:#40C4FF;height:auto;display:none"
   id="signupform">
     <h2 style="color:#fff">Sign Up</h2>
     <form>
    <div class="form-group">
      <label for="user">User:</label>
      <input id="signup-username" type="text" class="form-control" name="username" value="" placeholder="username">
    </div>

    <div class="form-group">
      <label for="email">Email:</label>
      <input id="signup-email" type="text" class="form-control" name="email" value="" placeholder="email">
    </div>

    <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="password">
    </div>

    <div class="form-group">
    <label for="pwd">Retype Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="retype password">
    </div>
    <br>
    <button type="submit" class="btn btn-default">Submit</button>
    <button type="submit" class="btn btn-primary">Sign up with Facebook</button>
    <br><br>
    <div class="form-group">
      <div class="col-md-12 control">
        <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
            Have an account already?
          <a href="#" onClick="$('#signinform').show(); $('#signupform').hide()">
            Log in Here
          </a>
        </div>
      </div>
    </div>
    <br><br>
    </form>
    </div>

<script>
$(document).ready(function(){
    $("#signup").click(function(){
      $("#signupform").show();
      $("#signinform").hide();
    });
    $("#signin").click(function(){
      $("#signinform").show();
      $("#signupform").hide();
    });
});
</script>