Thursday, March 16, 2017

hide second p tag jquery

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

<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