JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="place1" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place2" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place3" class="formplacer">
    <button class="getform">Bring form here</button>
</div>

<button id="hide">hide form</button>

<form id="multiform">
    input
    <input type="text" name="field1" />
    <input type="submit" name="submit" value="sumbit" />
</form>

CSS

.formplacer{
    margin:10px;
    padding:5px;
    border:1px solid #c88;
    width:200px;
}

form{
    width:150px;
    border:1px solid #ccc;
    padding:5px;
}
form input{margin:5px 0;}

JavaScript

var myform = $('#multiform')
    .submit(function(){
        alert('submit clicked');
        return false;
    })
    .hide(0);



$('.getform').click(function(){
    var base = this;
    myform.slideUp('slow', function(){
        $(base).closest('.formplacer').append(myform.slideDown('slow'));
    });
});

$('#hide').click(function(){
    myform.slideUp('slow');
});