CODEWITHSUNDEEP
jqueryhideshow
user1681836
user1681836

Reputation: 51

show hide div based on input field

I am trying to make a simple quiz with just one question, I have got to the stage where if the correct answer is typed in then a "correct" message is shown, my problem is I also want to have an "incorrect" message display for 1 second then fade out if anything else is typed in the input field.

I dont really know how to get both functions to happen, here is what I have so far

http://jsfiddle.net/bloodygeese/3XGGn/36/

 <p>What is 10 x 2 ?</p>
<div id="correct">
That's Correct!
</div>
<div id="incorrect">
Sorry, Try again!
</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>​



$(document).ready(function(){
$("#buttontest").click(function(){

    if ($('#full_day').val() == 20) {   

        $("#correct").show("fast"); //Slide Down Effect
    } 
    else {
        $("#correct").hide("fast");    //Slide Up Effect
    }
});


});​

Upvotes: 0

Views: 2090

Answers (3)

Uirri
Uirri

Reputation: 273

Make it simple with only one line to add. In your else:

else {
     $("#incorrect").show("500").delay("1000").hide("500");
}

example: http://jsfiddle.net/3XGGn/39/

EDIT:

I see you already accepted the answer so it should be satisfactory, however, I noticed now that I misread your question.

[..] "incorrect" message display for 1 second then fade out if anything else is typed in the input field.

What I gave you fades away regardless of if anything is typed in the input field. I'll provide you with the code for what you actually asked for and you can choose which one you want to use.

$("#buttontest").click(function(){

    if ($('#full_day').val() == 20) {   

        $("#correct").show("fast"); //Slide Down Effect
    } 
    else {
        $("#correct").hide("fast");    //Slide Up Effect
        $("#incorrect").show("500");
    }
});
$("#full_day").change(function() {
    $("#incorrect").hide("500");
});

Example fiddle

Upvotes: 2

Lennart
Lennart

Reputation: 1560

$(document).ready(function(){
$("#buttontest").click(function(){

    if ($('#full_day').val() == 20) {   

        $("#incorrect").hide("fast"); 
        $("#correct").show("fast");

    } 
    else {
        $("#correct").hide("fast");
        $("#incorrect").show("fast");
    }
});


});​

That should solve your problem, you have to hide the div before you show the next one!

Upvotes: -1

Sushanth --
Sushanth --

Reputation: 55740

You can just use a single div and just change the html

$(document).ready(function(){
    $("#buttontest").click(function(){
        var html = 'That\'s Correct!' ;
        if ($('#full_day').val() != 20) {   
            html = 'Sorry, Try again!' ;
        }
         $("#correct").html(html).show("fast"); //Slide Down Effect
    });
});​

FIDDLE

Upvotes: 0

Related Questions