Hide Content w/o Classes

Hide content with jQuery function when class cannot be assigned.

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">
  <dl class="last">
    <dt>
      <label class="required">
        <em>*</em>
        Baby sengesæt
      </label>
    </dt>
    <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" price="0" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
            <span class="label">
              <label for="options_6032_2">Uden Navn </label>
            </span>
          </li>
          <li>
            <input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" price="100" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
            <span class="label">
              <label for="options_6032_3">
                Med Navn
                <span class="price-notice">
                  +
                  <span class="price">Dkr100.00</span>
            </span>
            </label>
            </span>
          </li>
        </ul>
        <span id="options-6032-container"></span>
      </div>
    </dd>
    <dt>
      <label class="required">
        <em>*</em>
        Barns navn
      </label>
    </dt>
    <dd>
      <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()">
        <p class="note">
          Maximum number of characters:
          <strong>25</strong>
        </p>
      </div>
    </dd>
    <dt>
      <label class="required">
        <em>*</em>
        Vælg tråd skrifttype
      </label>
    </dt>
    <dd>
      <div class="input-box fontclass">
...

JavaScript

var hideRadio = $('li:nth-child(2) input:radio');
var showRadio = $('li:first input:radio');

hideRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').hide();
  $(this).closest('dd').siblings(':nth-child(4)').hide();
})
showRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').show();
  $(this).closest('dd').siblings(':nth-child(4)').show();
})

$('options_6032_2').advaiceContainer = 'options-6032-container';
$('options_6032_2').callbackFunction = 'validateOptionsCallback';

$('options_6032_3').advaiceContainer = 'options-6032-container';
$('options_6032_3').callbackFunction = 'validateOptionsCallback';