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