JSFiddle - React, Tailwind, and code Playground

by cristianstan

HTML

<form>
            
            <div class="fieldContainer">
            <p><label class="shown">Website (please use http://www.)</label> 
				<input name="webSite" id="webSite" class="shown" required="required" placeholder="http://example.com" type="text"></p>
            </div>

            <div class="fieldContainer">
            <p><label class="notShown">Nume:</label>
                <input name="clientName" id="clientname" class="notShown" required="required" placeholder="numele" type="text"></p>
            </div>

            <div class="fieldContainer">
            <p><label class="notShown">Email:</label> 
                <input name="cleintEmail" id="cleintEmail" class="notShown" required="required" placeholder="[email protected]" type="text"></p>
            </div>

            <div class="fieldContainer">
            <p><label class="notShown">Telefon:</label>
                <input name="clientPhone" id="clientPhone" class="notShown" required="required" placeholder="numar de contact" type="text"></p>
            </div>

            <div class="fieldContainer">
            <p><label class="notShown">Keywords</label>
                <input name="seoKeywords" id="keyWords" class="notShown" required="required" placeholder="cuvinte cheie vizate" type="text"></p>
            </div>

            <div class="fieldContainer">
            <p><label class="notShown">Siteul vizeaza tara:</label>
                <input name="seoCountry" id="seoCountry" class="notShown" required="required" placeholder="ex: Romania" type="text"></p>
            </div>

            <div class="fieldContainer">
            <p><label class="notShown">Nisa siteului:</label>
                <input name="seoSiteNiche" id="seoSiteNiche" class="notShown" required="required" placeholder="ex: " type="text"></p>
            </div>

            <p><input value="Submit" type="submit"></p>      
                      
        </form>

CSS

form.fieldContainer
{
    display: none;
}

JavaScript

$(document).ready(function() {
    
    // First Show the First Element & Focus it
    $("form.fieldContainer:first-child").fadeIn(500).focus();
    
    // Setup a transition handler:
    $("form.fieldContainer").keyup(function(ev) {
        
        if $('#nextButton').click(show_next);
        {
            ev.preventDefault();
            ev.stopPropagation();
            
            var _next = $(this).parents('form.fieldContainer').next('form.fieldContainer');
            _next.fadeIn(500);
            _next.find("input").focus();
        }
        
    });
    
});