Untitled

 avatar
user_0173598705
html
2 years ago
5.0 kB
3
Indexable
Never
<!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&ndash;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>