JSFiddle - React, Tailwind, and code Playground

by bryangrimes

HTML

<input type="text" id="zipcode" />

<li class="address-list">
            <li id="section-address">
                <div class="annotation">
                  <p>Utility billing address</p>
                </div>
                
                <div class="content">
                   <fieldset class="password_field"><span class="help-text"></span><label for="user_password">Address1:<span class="required-field">*</span></label><input id="user_address1" name="user[address1]" size="30" type="text" /></fieldset>
                </div>
            </li>
            
            <li id="section-address2">
                <div class="annotation">
                  <p>Is there an apartment or suite number?</p>
                </div>
                
                <div class="content">
                   <fieldset class="password_field"><span class="help-text"></span><label for="user_password">Address2:</label><input id="user_address2" name="user[address2]" size="30" type="text" /></fieldset>
                </div>
            </li>
</li>

JavaScript

$(document).ready(function() {
        $('#section-address').slideUp(0);
        $('#section-address2').slideUp(0);
       
        $('#zipcode').blur(function() {
            if(this.value) {
               $('#section-address').slideDown(300);
            $('#section-address2').slideDown(300); 
            }
        });
    });