JSFiddle - React, Tailwind, and code Playground

by Usman Khan

HTML

<p>ENTER YOUR INVITATION CODE</p>
<div id="incorrect">Sorry, Try again!</div>
<input type='text' id="code"/>
<input type='button' id="buttontest" value="VERIFY"/>

<div id="JPC1">CONTENT 1</div>
<div id="JPC2">CONTENT 2</div>

CSS

#incorrect {display:none;} #code {color:#000;}
#JPC1, #JPC2 {display:none;}

JavaScript

$(document).ready(function(){
    $("#buttontest").click(function(){
        if ($('#code').val() == "1") {   
            $("#JPC1").show("fast"); //Slide Down Effect
            $("#JPC2").hide("fast"); //Slide Down Effect
            $("#incorrect").hide("fast");    //Slide Up Effect
        } 
        else if ($('#code').val() == "2") {   
            $("#JPC1").hide("fast"); //Slide Down Effect
            $("#JPC2").show("fast"); //Slide Down Effect
            $("#incorrect").hide("fast");    //Slide Up Effect
        } 
        else {
            $("#incorrect").show("fast");    //Slide Up Effect
        }
    });
});