JSFiddle - React, Tailwind, and code Playground

by cmatskas

HTML

<div id="container">
    <div id="dvAddressList">
        <input type="button" value="Click me" title="Click Me" id="createAddress" /><br/>
        LIst of addresses here<br />
        LIst of addresses here<br />
        LIst of addresses here<br />
        LIst of addresses here<br />
        LIst of addresses here<br />
        LIst of addresses here<br />
    </div>
    <div id="dvCreateAddress" style="display:none">
        <input type="button" value="Take me back" title="Take me back" id="selectAddress"/>
        <input type="text" id="txtAddress1" />
        <input type="text" id="txtAddress2" />
        <input type="text" id="txtAddress3" />
        <input type="text" id="txtAddress4" />
        <input type="button" value="hello" title="Hello" id="btnSubmit" />
    </div>
</div>

CSS

#dvAddressList{
    width:100;
}

#container{
    width:200px;
}

#dvCreateAddress{
    width:100px
}

JavaScript

$('#createAddress').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#dvAddressList').hide("slide", {direction: "left"}, 500, function(){
        $('#dvCreateAddress').show("slide", {direction: "right"}, 500);    
    });
});

$('#selectAddress').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('#dvCreateAddress').hide("slide", {direction: "right"}, 500, function(){
        $('#dvAddressList').show("slide", {direction: "left"}, 500);    
    });
});

$('#btnSubmit').on('click', function(e){
    e.preventDefault();
    var address = {
        Address1 : $('#txtAddress1').val(),
        Address2 : $('#txtAddress2').val(),
        Address3 : $('#txtAddress3').val(),
        Address4 : $('#txtAddress4').val()
    };
    
    var data = JSON.stringify(address);
    alert(data);
});