CODEWITHSUNDEEP
javascripthtmljquery
Mark
Mark

Reputation: 4873

Complicated Conditional

I have a set of instruction at the top of my page:

    <div class="instructions">
        <div id="step1" class="step"><span class="step_active">1</span><span class="step_title_active">General Info</span></div>
        <div id="step2" class="step"><span class="step_next">2</span><span class="step_title">Select Contact</span></div>
        <div id="step3" class="step"><span class="step_next">3</span><span class="step_title">Log Details</span></div>
    </div>

I have a form that reveals itself as conditions are met. The first condition being that both select boxes must have options selected, before the next part appears.

<script>
$(document).ajaxSuccess(function () {
    $("#test").hide();
    $("#comType, #comDirection").bind('change', function () {
        // show the button if they both have a value
        if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) {
            $("#test").fadeIn();
        }
    });
});
</script>

How can I change the classes in #step1 #step2 so that when the above conditions are met, they appear as:

   <div id="step1" class="step"><span class="step_complete">1</span><span class="step_title">General Info</span></div>
    <div id="step2" class="step"><span class="step_active">2</span><span class="step_title_active">Select Contact</span></div>

Thoughts?

Upvotes: 0

Views: 58

Answers (1)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

You can use addClass & removeClass property of jQuery.

Try this: 

if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) {
    $("#test").fadeIn();
    $("#step1").children("span").removeClass("step_active").addClass("step_complete");
    $("#step2").children("span").removeClass("step_next").addClass("step_active");
    $("#step1").children("span").next("span").removeClass("step_title_active").addClass("step_title");
    $("#step2").children("span").next("span").removeClass("step_title").addClass("step_title_active");   
}

Upvotes: 2

Related Questions