Hello, and thank you to anyone willing to stop in.

I'm new to Bootstrap. Building a login page that requires a sort of click-through consent banner before granting users access to other options.
Currently struggling to find a working solution using collapse, panels, and accordions. I've tinkered with different online examples. Is there a way to accomplish this?

The full page is styled/ fleshed out nicely elsewhere, but here is an idea of where I am functionally:
http://jsbin.com/zatajo/edit?html,output

(OR)


Code:
<!DOCTYPE html>
<html lang="en">

	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TENA: Request Account</title>
    
    <!-- Bootstrap /cire/ css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <style>
    
    .border {
			border: #f2f2f2 2px solid;
			border-radius: 15px;
			-webkit-border-radius: 15px;
		}
	
	.even {
    		margin-top: 6px; 
    	}
    	
    .panel {
    		border: none;
    	}
    	
    .panel, .route-blurb-container {
    		-webkit-box-shadow: none;
    		box-shadow: none;
    	}
    	
	</style>
</head>

<body>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    
    <div class = "container">
    <div class = "row">
    
    	 <!-- Click-through banner section. -->
		<div class = "accordion" id = "click-through">
		<div class="accordion-group">
    			<div class="accordion-toggle" data-toggle="collapse" data-parent="consent">
    				<p class = "border" style = "padding: 15px; margin-top: 30px;">
    				I am trying to create a click-through banner within a login page.<br/>
    				A block of text will be here. <br/>
    				Upon clicking the OK button below, this section needs to not only collapse permanently along with the button, but expand the login area.<br/> <br/>
				
					<button class="btn btn-default center-block" type="button" data-toggle="collapse" data-target="#DoD-consent, #login-area" aria-position = "false" aria-controls="#click-through">
					OK</button></p>

	</div>
	
		<!-- Login section. -->
		<div class = "collapse" id = "login-area">
  				<div class= "form-inline buffer border" style = "padding: 15px; margin-top: 30px;">
  					
  					<!-- User's 1st Option.
  					Clicking the radio button for this will close the panels for any other options if they are currently displayed.-->
  					<input name = "authentication" type = "radio" data-toggle = "collapse" data-target = "#"/> Using Type 1.
  						<div style = "margin-left: 36px;"><i>Brief instructions for Type 1.</i><br/> <br/>
  					</div>
  						
  					<!-- User's 2nd Option.
  					Clicking the radio button for this will expand the associated panel below.-->
  					<input name = "authentication" type = "radio" data-toggle = "collapse" data-target = "#authenticate2"/> Using Type 2.
  					<div class = "panel-group" id="accordian">
  						<div class = "panel panel-default">
  							<div id="authenticate2" class="panel-collapse collapse">	
  							<div class = "form-group">
  								<div class= "panel-body">
  									<div class = "col-sm-12">
  										<div class = "col-sm-3">
  											<p class="even">Username</p>
									</div>
										<div class = "col-sm-9">
											<label class = "sr-only" for = "username">Username</label>
  											<input type = "text" class = "form-control" id = "username" aria-describedby="helpBlock1">
									</div>
								</div>
									<div class = "col-sm-12">
										<div class= "col-sm-3">
											<p class="even">Password</p>
									</div>
										<div class = "col-sm-9">
											<label class = "sr-only" for = "username">Password</label>
											<input type = "text" class = "form-control" id = "password ">
									</div>
								</div> 
  							</div> <!-- panel body -->
  						</div> <!-- form-group -->
  						</div> <!-- ID = "authenticate2" -->
  					</div> <!-- panel default -->

  						<p style = "padding-top: 15px;">* Clicking the radio button for the 2nd option should expand the password login section.<br/>
  						* Clicking the 1st option should collapse the password login section if it is expanded.<br/>
  						* I need to make the behaviors consistent in case the user clicks back and forth between the options.<br/>
  						* If there is a way to prevent the currently selected button from reacting to being clicked consecutively, that would be ideal.</p>
  				</div> <!-- accordian -->
  						
			</div> <!-- form inline -->
	</div> <!-- end login section -->
</body>
Side-note that I am still sorting out how to get the radio options to behave properly, however the click-through banner is my main concern. Although I would prefer to avoid or minimize the use of jQuery, is that something I will need to make use of here?
Any advice would be greatly appreciated.