JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div class='contain'>

<input type='text' class='here'>
<a href="#" class="more">click</a>
<input type='text' class='boo'>
<input type='text' class='boo'>

</div>

CSS

body {
    margin: 50px;
}

.here {
    width: 200px;
}

.contain {
    width: 400px;
    height: 100px;
    background: #ddd;
    border: 1px solid black;
}

.boo {
    width: 1px;
    height: 1em;
}

JavaScript

$('.boo').hide();

$('.more').click(function() {

    $('.boo').each(function() {
        
        if ($(this).is(':visible')) {
            $(this).animate({width: 0},500).hide(400);
            $('.here').animate({width: "200px"},400);
        
        } 
        else {
            $(this).show();
            $('.here').animate({width: "100px"},400);
            $(this).animate({ width: "100px" },400);
        }            

        console.log($(this));
        
        
    });

});