JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="JPC1" class="ini-hide">CONTENT 1</div>
<div id="JPC2" class="ini-hide">CONTENT 2</div>

CSS

#incorrect {display:none;} #code {color:#000;}
#JPC1, #JPC2, div.ini-hide {display:none;}

JavaScript

$(document).ready(function(){
    $("#buttontest").click(function(){
    $("div.ini-hide").hide("fast");
    switch($('#code').val()){
    	case "1":
      	  	$("#JPC1").show("fast"); //Slide Down Effect
      break;
      case "2":
            $("#JPC2").show("fast"); //Slide Down Effect
      break;
      default:
      			$("#incorrect").show("fast");    //Slide Up Effect
      break;
    }
    });
});