固定ヘッダーのボタンをクリックして別のボックスを作成する

Question

###前提・実現したいこと
jQUeryを勉強中です。
スマートフォン用のwebページを作成しています。
header箇所を固定で、最初に表示されているボタンをタップすると下にテキストボックスが現れるようにしたいです。
1つめのテキストボックスを表示している時に2つ目のボタンをタップすると1つ目のテキストボックスが消え、2つ目のテキストボックスを表示させたいです。
現状では1つ目のテキストボックス表示時に2つめのテキストボックスを表示すると1つ目の下に出てきてしまいます。

よろしくお願いいたします。

###該当のソースコード

<header>
				<p class="btn_backbox">
					<a href="index.html" class="btn_back">戻るボタン</a>
				</p>
				<nav class="section_nav">
					<ul>
						<li>
							<a href="#" class="bookmark header_btn_change">ボタン1</a>
						</li>
						<li>
							<a href="#" class="search header_btn_change">ボタン2</a>
						</li>
						<li>
							<a href="sheet.html" class="sheet">リンク1</a>
						</li>
					</ul>
				</nav><!-- /.section_nav -->
				<div class="boxarea">
					<div id="bookmarkBox" class="header_pnl_change">
						<input type="text" id="txtBookmark" value="" size="" placeholder="textbox1"><button id="btnRegister">登録</button><button id="btnCancel">キャンセル</button>
					</div><!-- /#searchBox -->
					<div id="searchBox" class="header_pnl_change">
						<input type="text" id="txtKeyword" value="" size="10" placeholder="textbox2"><button id="btnSearch">検索</button><button id="btnPrev">前へ</button><button id="btnNext">次へ</button><button id="btnClose">×</button>
					</div><!-- /#searchBox -->
				</div>

			</header>

header {
	position: fixed;
	width: 100%;
}
.btn_backbox {
  display: block;
  background-color: #cace2d;
  padding: 11px 15px 6px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.h_headline {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.btn_backbox {
  padding: 11px 15px 6px 22px;
  position: relative;
}
.btn_backbox::before, .btn_backbox::after {
  content: "";
  display: block;
  position: absolute;
  left: 7px;
  top: calc(50% - 8px);
  border: solid transparent;
  width: 0;
  height: 0;
}
.btn_backbox::before {
  border-right-color: #fff;
  border-width: 10px 18px;
  margin-left: -11px;
}
.btn_backbox::after {
  border-right-color: #cace2d;
  border-width: 10px 18px;
  margin: 0 0 0 -9px;
}
.btn_backbox .btn_back {
  display: block;
  width: 100%;
}

$(function() {
  $(".contents").css({"padding-top":$("header").height()+ 15 +"px"});
  $('.search').on('click', function() {
		if ($('#searchBox').css('display') == 'none') {
			$('#container').stop().animate({paddingTop: '6.8vh'}, 500).queue(function(){$('#searchBox').css('display', 'block');});
		} else {
			$('#searchBox').css('display', 'none');
			$('#container').stop().animate({paddingTop: '0'}, 500);
		}
		return false;
	});
  $('.bookmark').on('click', function() {
		if ($('#bookmarkBox').css('display') == 'none') {
			$('#container').stop().animate({paddingTop: '6.8vh'}, 500).queue(function(){$('#bookmarkBox').css('display', 'block');});
		} else {
			$('#bookmarkBox').css('display', 'none');
			$('#container').stop().animate({paddingTop: '0'}, 500);
		}
		return false;
	});
  $('#btnClose').on('click', function() {
		$('#bookmarkBox').css('display', 'none');
		$('#container').stop().animate({paddingTop: '0'}, 500);
	});
  $('#btnCancel').on('click', function() {
		$('#bookmarkBox').css('display', 'none');
		$('#container').stop().animate({paddingTop: '0'}, 500);
	});


  $('#btnClose').on('click', function() {
		$('#searchBox').css('display', 'none');
		$('#container').stop().animate({paddingTop: '0'}, 500);
	});
  $('#btnCancel').on('click', function() {
		$('#bookmarkBox').css('display', 'none');
		$('#container').stop().animate({paddingTop: '0'}, 500);
	});
});