Untitled
user_0173598705
html
3 years ago
5.0 kB
6
Indexable
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.proto {
max-width: 768px;
padding-top: 4em;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container proto">
<div class="row">
<div class="col-xs-12">
<form>
<div class="form-group">
<label for="reason-list">What is your question or comment regarding?</label>
<select id="reason-list" class="form-control" required>
<option>Please choose an option</option>
<option value="coupon">Coupon Request</option>
<option value="quality">Product Quality Issue</option>
<option value="stock">Product Out of Stock</option>
<option value="like">Love Your Product</option>
<option value="locate">Locate a Product</option>
<option value="promotion">Promotion Issue</option>
<option value="other">All Other</option>
</select>
</div>
<div id="coupon" class="option-target hidden">
<p class="fine">Sorry. We are unable to give coupons upon request.</p>
</div>
<div id="quality" class="option-target hidden">
<p>To help expedite your request, we need additional information.</p>
<div class="form-group">
<label for="upc-code">UPC Code</label>
<input type="number" class="form-control" id="upc-code">
<span id="helpBlock" class="help-block"><span class="glyphicon glyphicon-question-sign"></span> Where is the <a tabindex="0" role="button" data-trigger="focus" data-toggle="popover" title="Help Locating" data-content="The UPC code can be found on the side of the package. It is what the store scans.">UPC Code</a>?</span>
</div>
<div class="form-group">
<label for="pic">Product Identification Code / Proof of Purchase</label>
<input type="number" class="form-control" id="pic">
<span id="helpBlock" class="help-block"><span class="glyphicon glyphicon-question-sign"></span> Where is the <a tabindex="0" role="button" data-trigger="focus" data-toggle="popover" title="Help Locating" data-content="The Product Identification Code / Proof of Purchase is a 10–digit number that can be found just below the best buy date on the side of the box.">Product Identification Code</a>?</span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script>
(function(){
// Opt-in to Bootstrap functionality
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
// Create variables
var optionsList = document.getElementById('reason-list'),
allTargets = $('.option-target'),
currentOption,
currentTarget;
// Create Hide and Show Functionality
function hideShowTargets(){
allTargets.each(function(){
this.classList.add('hidden');
});
currentOption = optionsList.value;
currentTarget = document.getElementById(currentOption);
if(currentTarget){
currentTarget.classList.remove('hidden');
}
}
// Add event listener
optionsList.addEventListener('change', hideShowTargets);
})();
</script>
</body>
</html>Editor is loading...