chriswhong/index.html

## index.html
<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

      .icon {
        height: 50px;
        margin-right: 10px;
      }

      div[id^="download"] {
        display: none;
      }

    </style>
  </head>
  <body>
    <div class="row">
    <div class="center-block" style="width:400px;">
    <form class="form-horizontal">
      <fieldset>

      <!-- Form Name -->
      <legend>A Simple Form for Alex P.</legend>

      <!-- Multiple Radios -->
      <div class="form-group">
        <label class="col-md-4 control-label" for="radios">Total Square Footage</label>
        <div class="col-md-4">
        <div class="radio">
          <label for="radios-0">
            <input type="radio" name="radios" id="radios-0" value="1" checked="checked">
            Less than 10,000
          </label>
        </div>
        <div class="radio">
          <label for="radios-1">
            <input type="radio" name="radios" id="radios-1" value="2">
            10,000 or greater
          </label>
        </div>
        </div>
      </div>

      <!-- Button -->
      <div class="form-group">
        <label class="col-md-4 control-label" for="submitButton"></label>
        <div class="col-md-4">
          <button id="submitButton" name="submitButton" class="btn btn-primary">Submit</button>
        </div>
      </div>

      </fieldset>
    </form>

    <div class="panel panel-primary" id="downloadA">
      <div class="panel-heading">Download</div>
      <div class="panel-body">
        <img src = "http://cdn.makeuseof.com/wp-content/uploads/2008/07/pdflogo.png?2047b0" class="icon">You need Download A
      </div>
    </div>
    <div class="panel panel-primary" id="downloadB">
      <div class="panel-heading">Download</div>
      <div class="panel-body">
         <img src = "http://cdn.makeuseof.com/wp-content/uploads/2008/07/pdflogo.png?2047b0" class="icon">You need Download B
      </div>
    </div>

    <!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script type="text/javascript">

      $('#submitButton').click(function(e) {
        $(this).prop('disabled', true);
        e.preventDefault();

        var selected = $("input[type='radio'][name='radios']:checked").val();

        if(selected == 1) {
          $('#downloadA').fadeIn();
        } else {
          $('#downloadB').fadeIn();
        }
      })

    </script>
    </div>
    </div>
  </body>
</html>
	<!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">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Bootstrap 101 Template</title>

	<!-- Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style>

	.icon {
	height: 50px;
	margin-right: 10px;
	}

	div[id^="download"] {
	display: none;
	}

	</style>
	</head>
	<body>
	<div class="row">
	<div class="center-block" style="width:400px;">
	<form class="form-horizontal">
	<fieldset>

	<!-- Form Name -->
	<legend>A Simple Form for Alex P.</legend>

	<!-- Multiple Radios -->
	<div class="form-group">
	<label class="col-md-4 control-label" for="radios">Total Square Footage</label>
	<div class="col-md-4">
	<div class="radio">
	<label for="radios-0">
	<input type="radio" name="radios" id="radios-0" value="1" checked="checked">
	Less than 10,000
	</label>
	</div>
	<div class="radio">
	<label for="radios-1">
	<input type="radio" name="radios" id="radios-1" value="2">
	10,000 or greater
	</label>
	</div>
	</div>
	</div>

	<!-- Button -->
	<div class="form-group">
	<label class="col-md-4 control-label" for="submitButton"></label>
	<div class="col-md-4">
	<button id="submitButton" name="submitButton" class="btn btn-primary">Submit</button>
	</div>
	</div>

	</fieldset>
	</form>

	<div class="panel panel-primary" id="downloadA">
	<div class="panel-heading">Download</div>
	<div class="panel-body">
	<img src = "http://cdn.makeuseof.com/wp-content/uploads/2008/07/pdflogo.png?2047b0" class="icon">You need Download A
	</div>
	</div>
	<div class="panel panel-primary" id="downloadB">
	<div class="panel-heading">Download</div>
	<div class="panel-body">
	<img src = "http://cdn.makeuseof.com/wp-content/uploads/2008/07/pdflogo.png?2047b0" class="icon">You need Download B
	</div>
	</div>

	<!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script type="text/javascript">

	$('#submitButton').click(function(e) {
	$(this).prop('disabled', true);
	e.preventDefault();

	var selected = $("input[type='radio'][name='radios']:checked").val();

	if(selected == 1) {
	$('#downloadA').fadeIn();
	} else {
	$('#downloadB').fadeIn();
	}
	})

	</script>
	</div>
	</div>
	</body>
	</html>