matherton/Dynamic Button

## Dynamic Button
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

<!-- The page title that is displayed in the top of the browser -->
  <title>Dynamic button demo</title>
<!-- Meta content describes your page and is indexed by search engines such as Google -->
  <meta name="description" content="The HTML5 BASE template">
  <meta name="author" content="Mark Atherton">

<!-- link to external Cascading Style Sheet -->
  <link rel="stylesheet" href="css/styles.css?v=1.0">

<!-- link to jQuery CDn on Google -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- NOTE: Very important when using HTML5 so that older versions of IE use Remy Sharps HTML5 shim so that IE versions prior to version 9 render HTML5 elements correctly. This conditional comment is telling the browser that the enclosed markup should only appear to users viewing the page with Internet Explorer prior to version 9:-->
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

<script>
	function clearBox(elementID)
	{
	    document.getElementById(elementID).innerHTML = "KES 0.00";
	}
</script>

</head>

<!-- Opening body tag this where all your page content goes -->
<body>

	<ul class="fares">
        <li>due now (hold booking)<br><span id="hold">KES 500.00</span></li>
        <li>pay later (flights)<br><span>KES 9,700.00</span></li>
        <li>total<br><span><strong>KES 9,900.00</strong></span></li>
  	</ul>

	<button type="button" class="btn btn-primary btn-lg fright first hold" id="btn_confirm display" onclick="document.getElementById('here').innerHTML=document.getElementById('hold').innerHTML">Hold these fares<i class="icon_continue"></i></button>

    <button type="button" class="btn btn-primary-pink btn-lg fright first remove" id="btn_confirm hidden" onClick="clearBox('here')" style="display:none">Remove hold<i class="icon_continue"></i></button>

    <div class="hold_fares">
        Hold these fares Price <div id="here">KES 0.00</div>
      </div>
      <table cellpadding="0" cellspacing="0" class="price_summary_table">
        <tbody>
          <tr>
            <th>Total Package Price</th>
            <td>KES
2,850.00</td>
          </tr>
          <tr>
            <th>Total Paid</th>
            <td>KES
0.00</td>
          </tr>
          <tr class="amount_due">
            <th>Total Amount Due</th>
            <td>KES
2,850.00</td>
          </tr>
        </tbody>
      </table>
    </div>


<!-- Link to external JavaScript file  -->
  <script src="js/scripts.js"></script>

	<script>
       //hide ansd show hold/remove fares button
    	$(document).ready(function(){

	      $('button.hold').click(function() {
	        $(this).css('display','none');
	        $('button.remove').css('display','block');
	      })

	      $('button.remove').click(function() {
	        $(this).css('display','none');
	        $('button.hold').css('display','block');
	      })

		});

 	</script>

</body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<!-- The page title that is displayed in the top of the browser -->
	<title>Dynamic button demo</title>
	<!-- Meta content describes your page and is indexed by search engines such as Google -->
	<meta name="description" content="The HTML5 BASE template">
	<meta name="author" content="Mark Atherton">

	<!-- link to external Cascading Style Sheet -->
	<link rel="stylesheet" href="css/styles.css?v=1.0">

	<!-- link to jQuery CDn on Google -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!-- NOTE: Very important when using HTML5 so that older versions of IE use Remy Sharps HTML5 shim so that IE versions prior to version 9 render HTML5 elements correctly. This conditional comment is telling the browser that the enclosed markup should only appear to users viewing the page with Internet Explorer prior to version 9:-->
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script>
	function clearBox(elementID)
	{
	document.getElementById(elementID).innerHTML = "KES 0.00";
	}
	</script>

	</head>

	<!-- Opening body tag this where all your page content goes -->
	<body>

	<ul class="fares">
	<li>due now (hold booking)<br><span id="hold">KES 500.00</span></li>
	<li>pay later (flights)<br><span>KES 9,700.00</span></li>
	<li>total<br><span><strong>KES 9,900.00</strong></span></li>
	</ul>

	<button type="button" class="btn btn-primary btn-lg fright first hold" id="btn_confirm display" onclick="document.getElementById('here').innerHTML=document.getElementById('hold').innerHTML">Hold these fares<i class="icon_continue"></i></button>

	<button type="button" class="btn btn-primary-pink btn-lg fright first remove" id="btn_confirm hidden" onClick="clearBox('here')" style="display:none">Remove hold<i class="icon_continue"></i></button>

	<div class="hold_fares">
	Hold these fares Price <div id="here">KES 0.00</div>
	</div>
	<table cellpadding="0" cellspacing="0" class="price_summary_table">
	<tbody>
	<tr>
	<th>Total Package Price</th>
	<td>KES
	2,850.00</td>
	</tr>
	<tr>
	<th>Total Paid</th>
	<td>KES
	0.00</td>
	</tr>
	<tr class="amount_due">
	<th>Total Amount Due</th>
	<td>KES
	2,850.00</td>
	</tr>
	</tbody>
	</table>
	</div>


	<!-- Link to external JavaScript file -->
	<script src="js/scripts.js"></script>

	<script>
	//hide ansd show hold/remove fares button
	$(document).ready(function(){

	$('button.hold').click(function() {
	$(this).css('display','none');
	$('button.remove').css('display','block');
	})

	$('button.remove').click(function() {
	$(this).css('display','none');
	$('button.hold').css('display','block');
	})

	});

	</script>

	</body>
	</html>