Hello
here i explain you how to hide nearest div or class or p tag.
HTML
<select id="pa_subscription-option" class="" name="attribute_pa_subscription-option" data-attribute_name="attribute_pa_subscription-option" >
<option value="">Choose an option</option>
<option value="free-plan" class="attached enabled">Free Plan</option>
<option value="monthly-plan" class="attached enabled">Monthly Plan</option>
<option value="yearly-plan" class="attached enabled">Yearly Plan</option>
</select>
<div class=" product-addon product-addon-additional-camera"
<h3 class="addon-name">Additional Camera </h3>
<p class="form-row form-row-wide addon-wrap-76315-additional-camera-0">
<label>Monthly Subscription (<span class="amount">USD10.00</span>)</label>
<input step="" class="input-text addon addon-input_multiplier" data-raw-price="10" data-price="10" name="addon-76315-additional-camera-0[monthly-subscription]" value="0" min="0" max="100" type="number">
<span class="addon-alert" style="display: none;">This must be a number!</span>
</p>
<p class="form-row form-row-wide addon-wrap-76315-additional-camera-0">
<label>Yealy Subscription (<span class="amount">USD96.00</span>)</label>
<input step="" class="input-text addon addon-input_multiplier" data-raw-price="96" data-price="96" name="addon-76315-additional-camera-0[yealy-subscription]" value="0" min="0" max="100" type="number">
<span class="addon-alert" style="display: none;">This must be a number!</span>
</p>
<div class="clear"></div>
</div>
JAVASCRIPT
here i explain you how to hide nearest div or class or p tag.
HTML
<select id="pa_subscription-option" class="" name="attribute_pa_subscription-option" data-attribute_name="attribute_pa_subscription-option" >
<option value="">Choose an option</option>
<option value="free-plan" class="attached enabled">Free Plan</option>
<option value="monthly-plan" class="attached enabled">Monthly Plan</option>
<option value="yearly-plan" class="attached enabled">Yearly Plan</option>
</select>
<div class=" product-addon product-addon-additional-camera"
<h3 class="addon-name">Additional Camera </h3>
<p class="form-row form-row-wide addon-wrap-76315-additional-camera-0">
<label>Monthly Subscription (<span class="amount">USD10.00</span>)</label>
<input step="" class="input-text addon addon-input_multiplier" data-raw-price="10" data-price="10" name="addon-76315-additional-camera-0[monthly-subscription]" value="0" min="0" max="100" type="number">
<span class="addon-alert" style="display: none;">This must be a number!</span>
</p>
<p class="form-row form-row-wide addon-wrap-76315-additional-camera-0">
<label>Yealy Subscription (<span class="amount">USD96.00</span>)</label>
<input step="" class="input-text addon addon-input_multiplier" data-raw-price="96" data-price="96" name="addon-76315-additional-camera-0[yealy-subscription]" value="0" min="0" max="100" type="number">
<span class="addon-alert" style="display: none;">This must be a number!</span>
</p>
<div class="clear"></div>
</div>
JAVASCRIPT
<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
jQuery('#pa_subscription-option').on('change', function(){
var selsub = $( "#pa_subscription-option" ).val();
if(selsub == 'yearly-plan'){
$(".product-addon-additional-camera p").eq(0).hide();
$(".product-addon-additional-camera p").eq(1).show();
} else if(selsub == 'monthly-plan'){
$(".product-addon-additional-camera p").eq(1).hide();
$(".product-addon-additional-camera p").eq(0).show();
} else {
$(".product-addon-additional-camera p").eq(1).show();
$(".product-addon-additional-camera p").eq(0).show();
}
});
});
</script>
eq(0) means first and eq(1) means second.
No comments:
Post a Comment