CODEWITHSUNDEEP
jqueryhtmlcssfadeout
mar2195
mar2195

Reputation: 103

jQuery - Fade Out DIV from multiple dropdowns

I need to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are returned to the original ("None") selection. Hope someone can help. Thanks.

*I have this DIV fadeIn() working just fine using "change" when any selection is made ... not a problem.

<select class="planDrop" id="golfplan" name='golfplan' onchange="calculateTotal()">
    <option value="None">Make Selection &rarr;</option>
    <option value="g1">Individual</option>
    <option value="g2">Couple</option>
    <option value="g3">Family</option>
</select>

<select class="planDrop" id="tennisplan" name='tennisplan' onchange="calculateTotal()">
    <option value="None">Make Selection &rarr;</option>
    <option value="t1">Individual</option>
    <option value="t2">Couple</option>
    <option value="t3">Family</option>
</select>

<select class="planDrop" id="poolplan" name='poolplan' onchange="calculateTotal()">
    <option value="None">Make Selection &rarr;</option>
    <option value="p1">Individual</option>
    <option value="p2">Couple</option>
    <option value="p3">Family</option>
</select>


<div class="checkbox10" id="init10Section" style="display:none;">
    <div><input type="checkbox" id="init10" name='init10' onclick="calculateTotal()" /> 10% Off</div>
</div>

Upvotes: 0

Views: 651

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 10141

Here is the solution, check out this demo JSFIDDLE

JS:

$('.planDrop').change(function(){
    if($('#golfplan').val() == "None" && $('#tennisplan').val() == "None" && $('#poolplan').val() == "None")
    {
        $('.checkbox10').fadeOut(500);
    }
    else
    {
        $('.checkbox10').fadeIn(1000);
    }
});

Upvotes: 1

Related Questions