JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<form id="myForm" action="">
Input 1<input type="Text"><br/>
Input 1<input type="Text"><br/>
Input 1<input type="Text"><br/>
Input 1<input type="Text"><br/>
Input 1<input type="Text"><br/>
<button id="modelSubmit">Submit</button>
</form>
<div>
    Results: <br/>
    blahblhablhablahblhablha<br/>
    blahblhablhablahblhablha<br/>
    blahblhablhablahblhablha<br/>
    blahblhablhablahblhablha<br/>
    blahblhablhablahblhablha<br/>
    blahblhablhablahblhablha<br/>
</div>

CSS

form{
    width: 300px;    
    border: 2px solid black;   
    padding: 10px;
    }

input {
    margin: 4px;
    padding: 4px;
    line-height: 20px;
}
button {
 margin: 20px 10px 10px 10px;   
}
span{
 border: 1px solid black;
padding: 4px;
 cursor: pointer;   
}
div {
 margin: 6px;   
}

JavaScript

$(function() {

    $('#modelSubmit').click(function(event) {
        event.preventDefault();
        var $searchLink = $('<span/>').attr('id', 'search_again')
                                      .text('Search Again')
                                      .click(function() {
                                          $($searchLink).remove();
                                          $('#myForm').slideDown();                                          
                                      });
        
        $('#myForm').slideUp(function(){
            $('#myForm').after($searchLink);
        });
    });
});