Hide Content

Hide content with jQuery function.

by Julian Ritchey

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="product-options-wrapper" class="product-options">
  <dd>
    <div class="input-box display">
      <ul id="options-6032-list" class="options-list">
        <li>
          <input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
          <label for="options_6032_2">Show </label>
        </li>
        <li>
          <input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
          <label for="options_6032_3">Hide</label>
        </li>
      </ul>
    </div>
  </dd>

  <dd class="hidden">
    <div class="input-box fontclass">
      <select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
        <option price="0" value="42969">Arial </option>
        <option price="0" value="42970">Lato </option>
        <option price="0" value="42971">Disney Print </option>
      </select>
    </div>
  </dd>

  <dd class="hidden">
    <div class="input-box">
      <input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
    </div>
  </dd>

  <dd class="last hidden">
    <div class="input-box colorclass">
      <select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
        <option price="0" value="42965">red </option>
        <option price="0" value="42966">black </option>
      </select>
    </div>
  </dd>
</div>

JavaScript

$('#options_6032_3').click(function() {
  $('.hidden').hide();
})
$('#options_6032_2').click(function() {
  $('.hidden').show();
})