ログインボタンにクリック後、ログインフォームを表示する方法

Bootstrapを使用しております。
下記のログインフォームを作成中のサイトの「ユーザーログイン」のボタンをクリックすると表示出来るようにしたいです。
（クリックしないと隠れている状態です。）
どのような方法があるかご教示頂けませんでしょうか？
※記載すべきコードをご教示頂けると幸いです。

コード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="">

<title>作成中のサイト</title>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="stylesheet" href="css/landing.css" type="text/css">  </head> <body id="page-top"> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="pagetop">ユーザーログイン▼</a><aside class="bg-dark"> <div class="container text-center"> <div class="call-to-action"> <h2>Free Download at Start Bootstrap!</h2> <a href="#" class="btn btn-default btn-xl wow tada">Download Now!</a> </div> </div> </aside> 以下省略

ログインフォームのhtml

コード

<div class="container3"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-login"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <a href="#" class="active" id="login-form-link">Login</a> </div> <div class="col-xs-6"> <a href="#" id="register-form-link">Register</a> </div> </div> <hr> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <form id="login-form" action="http://phpoll.com/login/process" method="post" role="form" style="display: block;"> <div class="form-group"> <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value=""> </div> <div class="form-group"> <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password"> </div> <div class="form-group text-center"> <input type="checkbox" tabindex="3" class="" name="remember" id="remember"> <label for="remember"> Remember Me</label> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-lg-12"> <div class="text-center"> <a href="http://phpoll.com/recover" tabindex="5" class="forgot-password">Forgot Password?</a> </div> </div> </div> </div> </form> <form id="register-form" action="http://phpoll.com/register/process" method="post" role="form" style="display: none;"> <div class="form-group"> <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value=""> </div> <div class="form-group"> <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value=""> </div> <div class="form-group"> <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password"> </div> <div class="form-group"> <input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password"> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now"> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div>

ログインフォームのcss

コード

}
.btn-login:hover,
.btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}

.btn-register {
background-color: #1CB94E;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
color: #fff;
background-color: #1CA347;
border-color: #1CA347;
}

ログインフォームのJS

コード

$(function() {

$('#login-form-link').click(function(e) {
	$("#login-form").delay(100).fadeIn(100);
	$("#register-form").fadeOut(100);
	$('#register-form-link').removeClass('active');
	$(this).addClass('active');
	e.preventDefault();
});
$('#register-form-link').click(function(e) {
	$("#register-form").delay(100).fadeIn(100);
	$("#login-form").fadeOut(100);
	$('#login-form-link').removeClass('active');
	$(this).addClass('active');
	e.preventDefault();
});

});

行動規範の内容に同意します

回答1件

ベストアンサー

ログインフォームの部分を

<div style="display:none;" id="loginform001">~~~</div> で囲む <script> function logiformopen(){ document.getElementById( "loginform001" ).style.display="block" ; } </script>

<a href="javascript:logiformopen();" >login</a>
をお好きな場所に組み込んで
で、オッケイだと思います

投稿2016/01/05 14:57