|
<!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> |
